/*
 * Manabi Video Navi — Viewport & Direct Contrast Guard V245
 *
 * Final presentation-only layer for the real cascade observed after V244.
 * It owns explicit foreground/background pairs and viewport containment only.
 * It does not own forms, requests, storage, media events, canvas coordinates,
 * QR data, permissions, routes or application state.
 */

body.mnv-future-ui {
  --mnv-v245-dark-bg: #041333;
  --mnv-v245-dark-surface: #0b2447;
  --mnv-v245-dark-primary: #f7fbff;
  --mnv-v245-dark-secondary: #d6e5f8;
  --mnv-v245-dark-muted: #b8cee8;
  --mnv-v245-dark-accent: #ffb15f;
  --mnv-v245-light-bg: #f8fbff;
  --mnv-v245-light-surface: #ffffff;
  --mnv-v245-light-primary: #071a33;
  --mnv-v245-light-secondary: #294964;
  --mnv-v245-light-muted: #405f77;
  --mnv-v245-light-link: #075cc9;
  --mnv-v245-focus: #20c8f4;
  overflow-x: clip;
}

/* -------------------------------------------------------------------------
   Live homepage: direct-child rules deliberately beat the legacy V242 rules.
   ------------------------------------------------------------------------- */

body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .koto-cosmic-hero .koto-hero-copy > h1#koto-hero-title > .koto-hero-problem {
  color: var(--mnv-v245-dark-primary) !important;
  -webkit-text-fill-color: var(--mnv-v245-dark-primary) !important;
  opacity: 1 !important;
  text-shadow: 0 8px 40px rgba(0, 0, 0, .72) !important;
}

body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .koto-cosmic-hero #koto-hero-title > .koto-solution-band,
body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .koto-cosmic-hero #koto-hero-title .koto-hero-solution,
body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .koto-cosmic-hero #koto-hero-title .koto-hero-solution em {
  color: var(--mnv-v245-dark-primary) !important;
  -webkit-text-fill-color: var(--mnv-v245-dark-primary) !important;
  opacity: 1 !important;
}

body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .koto-cosmic-hero #koto-hero-title .koto-hero-solution strong {
  background: none !important;
  color: var(--mnv-v245-dark-accent) !important;
  -webkit-text-fill-color: var(--mnv-v245-dark-accent) !important;
  text-shadow: 0 5px 28px rgba(0, 0, 0, .58) !important;
}

body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .koto-cosmic-hero .koto-hero-copy > p.koto-hero-promise[data-setting-key="hero_subtitle"] {
  color: var(--mnv-v245-dark-secondary) !important;
  -webkit-text-fill-color: var(--mnv-v245-dark-secondary) !important;
  opacity: 1 !important;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .82) !important;
}

/* The bridge and tiny route labels sit directly on scenery. */
body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .koto-cosmic-hero #koto-hero-title > .koto-hero-bridge,
body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .koto-cosmic-hero #koto-hero-title > .koto-hero-bridge > span,
body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .koto-cosmic-hero .koto-kicker,
body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .koto-cosmic-hero .koto-trust-row > span {
  color: var(--mnv-v245-dark-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* -------------------------------------------------------------------------
   Homepage cinematic stage: explicit text plus a useful 1024px composition.
   ------------------------------------------------------------------------- */

body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .brand-film-timeline time {
  color: #ffad82 !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .brand-film-timeline strong,
body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .brand-film-caption b,
body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .brand-film-dialog :is(.brand-film-dialog-head, .brand-film-dialog-foot) strong {
  color: var(--mnv-v245-dark-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .brand-film-timeline span,
body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .brand-film-caption small,
body.mnv-future-ui.mnv-contrast-v244.public-app.shell-public.page-index
  .brand-film-dialog :is(.brand-film-dialog-head, .brand-film-dialog-foot) span {
  color: var(--mnv-v245-dark-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* -------------------------------------------------------------------------
   Every editable text field gets an opaque pair. Hidden inputs, choices,
   range controls and buttons retain their existing dimensions and behavior.
   ------------------------------------------------------------------------- */

body.mnv-future-ui :is(
  input:not([type]):not([disabled]),
  input[type="text"]:not([disabled]),
  input[type="search"]:not([disabled]),
  input[type="email"]:not([disabled]),
  input[type="password"]:not([disabled]),
  input[type="url"]:not([disabled]),
  input[type="tel"]:not([disabled]),
  input[type="number"]:not([disabled]),
  input[type="date"]:not([disabled]),
  input[type="time"]:not([disabled]),
  input[type="datetime-local"]:not([disabled]),
  input[type="month"]:not([disabled]),
  input[type="week"]:not([disabled]),
  select:not([disabled]),
  textarea:not([disabled])
) {
  border-color: #789bb9 !important;
  background-color: var(--mnv-v245-light-surface) !important;
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: var(--mnv-v245-light-primary) !important;
  caret-color: var(--mnv-v245-light-link) !important;
}

body.mnv-future-ui :is(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  textarea
)::placeholder {
  color: #526c82 !important;
  -webkit-text-fill-color: #526c82 !important;
  opacity: 1 !important;
}

body.mnv-future-ui :is(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
):disabled {
  border-color: #b8c7d4 !important;
  background-color: #e8eef4 !important;
  color: #40576b !important;
  -webkit-text-fill-color: #40576b !important;
  opacity: 1 !important;
}

body.mnv-future-ui select option {
  background: #fff !important;
  color: var(--mnv-v245-light-primary) !important;
}

/* Browser autofill must not reintroduce translucent text. */
body.mnv-future-ui :is(input, textarea):-webkit-autofill {
  -webkit-text-fill-color: var(--mnv-v245-light-primary) !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
}

/* -------------------------------------------------------------------------
   Menus, dialogs and progress guidance stay above scenery and remain legible.
   ------------------------------------------------------------------------- */

body.mnv-future-ui :is(.guide-panel, .qr-login-dialog, .notification-menu-panel) {
  border-color: #b8cadb !important;
  background: #fff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui :is(.guide-panel, .qr-login-dialog, .notification-menu-panel)
  :is(h1, h2, h3, h4, label, legend, strong, summary) {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui :is(.guide-panel, .qr-login-dialog, .notification-menu-panel)
  :is(p, small, .muted, time) {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* The QR scrim is dark, but the dialog itself is a light reading surface.
   Keep the camera stage independent so its scan instructions stay white. */
body.mnv-future-ui .qr-login-modal .qr-login-dialog {
  border-color: #c6d7e6 !important;
  background: #fff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui .qr-login-modal .qr-login-dialog
  :is(.qr-login-header h2, .qr-login-header p, .qr-login-status, .qr-login-controls, .qr-login-help) {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui .qr-login-modal .qr-login-dialog .qr-login-header p {
  color: var(--mnv-v245-light-secondary) !important;
}

body.mnv-future-ui .qr-login-modal .qr-login-dialog
  :is(.qr-login-stage, .qr-login-camera-state, .qr-login-frame > b),
body.mnv-future-ui .qr-login-modal .qr-login-dialog
  :is(.qr-login-stage, .qr-login-camera-state, .qr-login-frame > b) :is(b, span) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.mnv-future-ui .mnv-next-action-v243 {
  color: var(--mnv-v245-dark-primary) !important;
}

body.mnv-future-ui .mnv-next-action-v243 :is(.mnv-next-action-copy > strong, .mnv-next-action-copy > small) {
  color: var(--mnv-v245-dark-primary) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.mnv-future-ui .mnv-next-action-v243 .mnv-next-action-copy > small {
  color: var(--mnv-v245-dark-secondary) !important;
}

body.mnv-future-ui .future-utility-dock > :is(.guide-fab, .qr-login-fab, .child-read-aloud),
body.mnv-future-ui .future-utility-dock > :is(.guide-fab, .qr-login-fab, .child-read-aloud) span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.mnv-future-ui .future-utility-dock > .luxury-command-fab,
body.mnv-future-ui .future-utility-dock > .luxury-command-fab span {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Command and detail surfaces are opaque light workspaces. Older shell rules
   made their background dark while leaving these direct children navy. */
body.mnv-future-ui :is(.mf-command-palette, .mf-detail-drawer, .luxury-command-panel) {
  border-color: #b8cadb !important;
  background: #fff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui :is(.mf-command-palette, .mf-detail-drawer, .luxury-command-panel)
  :is(h1, h2, h3, h4, label, legend, summary, strong, .luxury-command-count) {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui :is(.mf-command-palette, .mf-detail-drawer, .luxury-command-panel)
  :is(p, small, .muted, time) {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui :is(
  .mf-command-palette nav a,
  .mf-command-palette header button,
  .mf-detail-drawer > header button,
  .mf-detail-note,
  .luxury-command-grid > a,
  .luxury-command-panel > header > button
) {
  border-color: #c1d1df !important;
  background: #f4f8fc !important;
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Route planning keeps its dark cockpit, while its metric/day cards remain
   the light islands already guarded by V244. */
body.mnv-future-ui.mnv-contrast-v244:is(.page-route, .page-route_preview) .adaptive-plan-board {
  color: var(--mnv-v245-dark-primary) !important;
}

body.mnv-future-ui.mnv-contrast-v244:is(.page-route, .page-route_preview)
  .adaptive-plan-board .adaptive-plan-head h2,
body.mnv-future-ui.mnv-contrast-v244:is(.page-route, .page-route_preview)
  .adaptive-plan-board .adaptive-goal-card > strong {
  color: var(--mnv-v245-dark-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui.mnv-contrast-v244:is(.page-route, .page-route_preview)
  .adaptive-plan-board .adaptive-plan-head p,
body.mnv-future-ui.mnv-contrast-v244:is(.page-route, .page-route_preview)
  .adaptive-plan-board .adaptive-goal-card > span {
  color: var(--mnv-v245-dark-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui.mnv-contrast-v244:is(.page-route, .page-route_preview)
  .adaptive-plan-board .adaptive-plan-source {
  background: #132340 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.mnv-future-ui.mnv-contrast-v244:is(.page-route, .page-route_preview) .adaptive-day-row {
  border-color: #c6d7e6 !important;
  background: #fff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui.mnv-contrast-v244:is(.page-route, .page-route_preview) .adaptive-day-row.is-done {
  background: #eefbf5 !important;
}

body.mnv-future-ui.mnv-contrast-v244:is(.page-route, .page-route_preview) .adaptive-day-row.is-missed {
  background: #fff7ed !important;
}

body.mnv-future-ui.mnv-contrast-v244:is(.page-route, .page-route_preview)
  .adaptive-day-row :is(h1, h2, h3, h4, strong) {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui.mnv-contrast-v244:is(.page-route, .page-route_preview)
  .adaptive-day-row :is(.adaptive-day-date > small, .adaptive-day-date > span, .adaptive-day-body > p) {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* The practice mission cards are dark after V242, but their V241 children
   carried light-sheet navy. Direct foregrounds keep every mission readable. */
body.mnv-future-ui.mnv-contrast-v244.page-practice_lab
  .practice-unified-mission article :is(h1, h2, h3, h4, strong, b) {
  color: var(--mnv-v245-dark-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui.mnv-contrast-v244.page-practice_lab
  .practice-unified-mission article :is(p, small) {
  color: var(--mnv-v245-dark-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui.mnv-contrast-v244.page-practice_lab
  .practice-unified-mission article > span {
  color: #80ebff !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* The expandable future-review body is a deliberate light reading sheet. */
body.mnv-future-ui.mnv-contrast-v244.page-dekiru_review .standard-review-future-v1324 {
  border-color: #c6d7e6 !important;
  background: #fff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui.mnv-contrast-v244.page-dekiru_review
  .standard-review-future-v1324 :is(h1, h2, h3, h4, label, strong, summary) {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui.mnv-contrast-v244.page-dekiru_review
  .standard-review-future-v1324 :is(p, small, li, time) {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* Admin cards are darkened by the shell theme. These nested contact and cron
   components are intentionally opaque light workspaces, so their own copy
   must not inherit the shell's white foreground. */
body.mnv-future-ui :is(
  .admin-contact-notice,
  .contact-admin-kpis > a,
  .contact-admin-filters,
  .contact-inbox-list,
  .contact-detail-card,
  .contact-reply-card,
  .contact-history-card,
  .contact-person-grid > div,
  .contact-original-message,
  .contact-reply-channels label > span,
  .contact-history-list article,
  .cron-metrics > div,
  .cron-command-card
) {
  border-color: #c6d7e6 !important;
  background-color: #fff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui :is(
  .admin-contact-notice,
  .contact-admin-kpis > a,
  .contact-admin-filters,
  .contact-inbox-list,
  .contact-detail-card,
  .contact-reply-card,
  .contact-history-card,
  .contact-person-grid > div,
  .contact-original-message,
  .contact-reply-channels label > span,
  .contact-history-list article,
  .cron-metrics > div,
  .cron-command-card
) :is(h1, h2, h3, h4, label, legend, summary, strong, b, dt, dd) {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui :is(
  .admin-contact-notice,
  .contact-admin-kpis > a,
  .contact-admin-filters,
  .contact-inbox-list,
  .contact-detail-card,
  .contact-reply-card,
  .contact-history-card,
  .contact-person-grid > div,
  .contact-original-message,
  .contact-reply-channels label > span,
  .contact-history-list article,
  .cron-metrics > div,
  .cron-command-card
) :is(p, small, time, footer, .muted) {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* Preserve semantic status foregrounds that carry meaning in these light
   islands; the base guards above only neutralize accidental inheritance. */
body.mnv-future-ui .admin-contact-notice-count :is(strong, small),
body.mnv-future-ui .cron-command-card pre {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Learner records and account outcomes are light documents inside the dark
   application shell. Pair every direct information level explicitly. */
body.mnv-future-ui :is(
  .karte-kpis > div,
  .karte-record,
  .karte-record-grid section,
  .karte-next
) {
  border-color: #c6d7e6 !important;
  background-color: #fff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui :is(.karte-kpis > div, .karte-record, .karte-record-grid section, .karte-next)
  :is(h1, h2, h3, h4, strong, b, label) {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui :is(.karte-kpis > div, .karte-record, .karte-record-grid section, .karte-next)
  :is(p, span, small, time) {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* Report KPI tiles are light on all three report entry points. */
body.mnv-future-ui:is(.page-weekly_report, .page-goal_progress_report, .page-interview_growth_report)
  .growth-summary > div {
  background: #edf5ff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui:is(.page-weekly_report, .page-goal_progress_report, .page-interview_growth_report)
  .growth-summary > div > strong {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.mnv-future-ui:is(.page-weekly_report, .page-goal_progress_report, .page-interview_growth_report)
  .growth-summary > div > span {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Search/filter bars are light controls; surrounding notification and paging
   metadata sit on the dark shell and therefore need the inverse pair. */
body.mnv-future-ui .org-search-toolbar {
  border-color: #c6d7e6 !important;
  background: #f7faff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui .org-search-toolbar :is(label, legend, strong) {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.mnv-future-ui .org-search-toolbar :is(p, small, .wide) {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.mnv-future-ui :is(.notification-item-top, .notification-item-top > time, .org-pagination > span) {
  color: var(--mnv-v245-dark-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui .notification-readiness {
  border-color: #c6d7e6 !important;
  background: #f8fbff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui .notification-readiness > strong {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.mnv-future-ui .notification-readiness li.is-ok {
  background: #e9f8f1 !important;
  color: #176b51 !important;
  -webkit-text-fill-color: #176b51 !important;
}

body.mnv-future-ui .notification-readiness li.is-error {
  background: #fff0ea !important;
  color: #84251f !important;
  -webkit-text-fill-color: #84251f !important;
}

/* High-density admin islands use opaque surfaces to avoid the V244 shell
   foreground leaking into evaluation data and action-queue copy. */
body.mnv-future-ui :is(
  .admin-simple-list > div,
  .search-evaluation-kpis > div,
  .search-evaluation-videos article,
  .search-evaluation-meta > span,
  .mf-admin-action-queue,
  .mf-admin-action-queue li,
  .mf-action-empty
) {
  border-color: #c6d7e6 !important;
  background-color: #fff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui :is(
  .admin-simple-list > div,
  .search-evaluation-kpis > div,
  .search-evaluation-videos article,
  .search-evaluation-meta > span,
  .mf-admin-action-queue,
  .mf-admin-action-queue li,
  .mf-action-empty
) :is(h1, h2, h3, h4, strong, b, label) {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui :is(
  .admin-simple-list > div,
  .search-evaluation-kpis > div,
  .search-evaluation-videos article,
  .mf-admin-action-queue,
  .mf-admin-action-queue li,
  .mf-action-empty
) :is(p, span, small, time) {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui .mf-action-empty {
  background: #eefbf5 !important;
}

body.mnv-future-ui .page-loader-recovery > strong {
  color: #662e2b !important;
  -webkit-text-fill-color: #662e2b !important;
  opacity: 1 !important;
}

/* Video controls: the player cockpit is dark, while notes, resume prompts and
   secondary controls are deliberate light islands. No iframe or event target
   is resized or covered. */
body.mnv-future-ui :is(.unified-player-note, .unified-resume-notice) {
  border-color: #c6d7e6 !important;
  background: #f7fbff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui :is(.unified-player-note, .unified-resume-notice)
  :is(strong, b) {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui :is(.unified-player-note, .unified-resume-notice)
  :is(p, span) {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui .unified-player-controls
  :is(.player-tool:not(.primary-tool), .player-speed-control) {
  border-color: #c6d7e6 !important;
  background: #f4f8fc !important;
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.mnv-future-ui .unified-player-controls
  :is(.player-tool:not(.primary-tool), .player-speed-control) > span {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.mnv-future-ui .unified-player-controls .player-tool.primary-tool,
body.mnv-future-ui .unified-player-controls .player-tool.primary-tool > span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.mnv-future-ui .unified-playback-progress-head {
  color: var(--mnv-v245-dark-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.mnv-future-ui .unified-playback-progress-head b {
  color: var(--mnv-v245-dark-primary) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.mnv-future-ui .audio-answer-box {
  border-color: #c6d7e6 !important;
  background: #fff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui .audio-answer-box :is(h2, h3, label, legend, strong) {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.mnv-future-ui .audio-answer-box :is(p, small, [data-audio-status]) {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.mnv-future-ui.page-study_session .course-learning-outcome {
  border-color: #c6d7e6 !important;
  background: #f7fbff !important;
  color: var(--mnv-v245-light-primary) !important;
}

/* Remaining admin reading surfaces and operational watcher cells. */
body.mnv-future-ui :is(
  .skill-tree-node,
  .compact-empty,
  .admin-evaluation-caution,
  .watcher-status-grid > div,
  .watcher-safety-list > div,
  .watcher-operation-grid > div,
  .watcher-url-job,
  .watcher-url-job-grid > div
) {
  border-color: #c6d7e6 !important;
  background-color: #fff !important;
  color: var(--mnv-v245-light-primary) !important;
}

body.mnv-future-ui :is(
  .skill-tree-node,
  .compact-empty,
  .admin-evaluation-caution,
  .watcher-status-grid > div,
  .watcher-safety-list > div,
  .watcher-operation-grid > div,
  .watcher-url-job,
  .watcher-url-job-grid > div
) :is(h1, h2, h3, h4, strong, b, dt, dd, label) {
  color: var(--mnv-v245-light-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui :is(
  .skill-tree-node,
  .compact-empty,
  .admin-evaluation-caution,
  .watcher-status-grid > div,
  .watcher-safety-list > div,
  .watcher-operation-grid > div,
  .watcher-url-job,
  .watcher-url-job-grid > div
) :is(p, small, time) {
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui .watcher-table th {
  background: #f4f8fc !important;
  color: var(--mnv-v245-light-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Reassert semantic badges after the broad V244 admin foreground rule. */
body.mnv-future-ui .contact-status.status-new {
  background: #fff0ea !important;
  color: #84251f !important;
  -webkit-text-fill-color: #84251f !important;
}

body.mnv-future-ui .contact-status.status-in_progress {
  background: #fff6df !important;
  color: #755006 !important;
  -webkit-text-fill-color: #755006 !important;
}

body.mnv-future-ui .contact-status.status-waiting {
  background: #eaf3ff !important;
  color: #174f95 !important;
  -webkit-text-fill-color: #174f95 !important;
}

body.mnv-future-ui :is(.contact-status.status-replied, .contact-status.status-closed, .contact-account-ready) {
  background: #e9f8f1 !important;
  color: #176b51 !important;
  -webkit-text-fill-color: #176b51 !important;
}

body.mnv-future-ui .contact-account-unavailable {
  background: #edf2f6 !important;
  color: #40576b !important;
  -webkit-text-fill-color: #40576b !important;
}

body.mnv-future-ui .skill-level-badge {
  background: #eaf3ff !important;
  color: #174f95 !important;
  -webkit-text-fill-color: #174f95 !important;
}

body.mnv-future-ui :is(.watcher-role-chip.is-leader, .watcher-delivery-chip.is-sent) {
  background: #dcf7ec !important;
  color: #087252 !important;
  -webkit-text-fill-color: #087252 !important;
}

body.mnv-future-ui .watcher-role-chip.is-standby {
  background: #e5f0ff !important;
  color: #205b9f !important;
  -webkit-text-fill-color: #205b9f !important;
}

body.mnv-future-ui .watcher-role-chip.is-automation {
  background: #f0e8ff !important;
  color: #6d3ab2 !important;
  -webkit-text-fill-color: #6d3ab2 !important;
}

body.mnv-future-ui .watcher-delivery-chip.is-failed {
  background: #fff0dc !important;
  color: #8a3d00 !important;
  -webkit-text-fill-color: #8a3d00 !important;
}

body.mnv-future-ui .watcher-delivery-chip.is-reserved {
  background: #eee9ff !important;
  color: #5b41a5 !important;
  -webkit-text-fill-color: #5b41a5 !important;
}

body.mnv-future-ui :is(.watcher-delivery-chip.is-skipped, .watcher-delivery-chip.is-unknown) {
  background: #edf0f4 !important;
  color: #4c5665 !important;
  -webkit-text-fill-color: #4c5665 !important;
}

/* Practice answer copy and pale guidance chips need direct foregrounds because
   older selectors color their parent spans for the dark choice surface. */
body.mnv-future-ui.page-practice_lab .practice-choice-grid label > span > em {
  color: var(--mnv-v245-dark-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.mnv-future-ui .practice-easy-chip {
  color: #08765d !important;
  -webkit-text-fill-color: #08765d !important;
}

body.mnv-future-ui .practice-type-chip {
  color: #2458d6 !important;
  -webkit-text-fill-color: #2458d6 !important;
}

body.mnv-future-ui .practice-choice-assurance {
  color: #176653 !important;
  -webkit-text-fill-color: #176653 !important;
}

body.mnv-future-ui :is(.practice-video-hint-copy > span, .practice-video-point-basis) {
  color: #07506e !important;
  -webkit-text-fill-color: #07506e !important;
}

body.mnv-future-ui .external-video-locked {
  color: #405f77 !important;
  -webkit-text-fill-color: #405f77 !important;
}

/* -------------------------------------------------------------------------
   Viewport containment. The rules target containers, not iframe/canvas/QR
   rendering surfaces. Deliberate table rails remain horizontally scrollable.
   ------------------------------------------------------------------------- */

body.mnv-future-ui :is(
  main,
  main.container,
  .container,
  .shell-container,
  .admin-container,
  .admin-main,
  .org-main,
  .panel,
  .card,
  .side-card,
  .page-grid,
  .auth-wrap,
  form,
  fieldset,
  .koto-hero-inner,
  .koto-hero-copy,
  .koto-device,
  .koto-device-content,
  .mnv-next-action-v243,
  .mnv-next-action-controls
) {
  min-width: 0;
  max-inline-size: 100%;
}

body.mnv-future-ui :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend, summary, .button, button) {
  overflow-wrap: anywhere;
}

body.mnv-future-ui :is(.button, button, input, select, textarea) {
  box-sizing: border-box;
  max-inline-size: 100%;
}

body.mnv-future-ui :is(.inline-actions, .hero-actions, .panel-actions, .form-actions, .admin-actions, .org-actions) {
  flex-wrap: wrap;
}

body.mnv-future-ui :is(.table-scroll, .table-wrap, .org-table-wrap, .comparison-table-wrap, .compare-table-wrap) {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

body.mnv-future-ui :is(pre, .code-block, .debug-output) {
  max-inline-size: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body.mnv-future-ui :is(dialog, .guide-panel, .qr-login-dialog, .mf-command-palette, .mf-detail-drawer, .luxury-command-panel) {
  max-inline-size: calc(100vw - 24px);
  max-block-size: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
}

body.mnv-future-ui .assignment-save-intake {
  overflow: auto;
  overscroll-behavior: contain;
}

body.mnv-future-ui :is(
  .assignment-save-intake__card,
  .page-loader-card,
  .ai-wait-card,
  .practice-processing-card
) {
  max-block-size: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
}

/* -------------------------------------------------------------------------
   Cross-device composition.
   ------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  body.mnv-future-ui.public-app.shell-public.page-index .brand-film-stage {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .brand-film-poster {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .brand-film-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body.mnv-future-ui .future-utility-dock {
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(10px + var(--mf-mobile-nav-h, 0px) + env(safe-area-inset-bottom));
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  body.mnv-future-ui .future-utility-dock > :is(.luxury-command-fab, .guide-fab, .qr-login-fab, .child-read-aloud) {
    min-height: 44px;
    padding: 8px 12px;
    border-width: 1px;
    font-size: 12px;
  }
}

@media (max-width: 900px) {
  body.mnv-future-ui .site-header .site-nav-area,
  body.mnv-future-ui .site-header .site-nav-area.open {
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.mnv-future-ui .site-header .site-nav-area.open {
    border-color: rgba(114, 199, 255, .28) !important;
    background: #061a3f !important;
    color: var(--mnv-v245-dark-primary) !important;
  }

  body.mnv-future-ui .site-header .site-nav-area.open
    :is(.site-nav a, .nav-guide-button, .nav-actions a, .nav-actions button, .logout-inline-form button) {
    color: var(--mnv-v245-dark-primary) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  body.mnv-future-ui .mnv-next-action-v243 {
    max-height: calc(100dvh - var(--mnv-next-header, 68px) - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.mnv-future-ui :is(.page-grid, .auth-wrap, .admin-layout, .org-layout) > * {
    min-width: 0;
  }
}

@media (max-width: 700px) {
  body.mnv-future-ui.public-app.shell-public.page-index .brand-film-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.mnv-future-ui.public-app.shell-public.page-index .brand-film-timeline > div {
    padding: 18px !important;
  }

  body.mnv-future-ui .future-utility-dock {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body.mnv-future-ui.shell-learner.page-mypage .dash-layout > .mobile-mypage-menu {
    border-color: #c6d7e6 !important;
    background: #fff !important;
    color: var(--mnv-v245-light-primary) !important;
  }

  body.mnv-future-ui.shell-learner.page-mypage .mobile-mypage-menu > summary,
  body.mnv-future-ui.shell-learner.page-mypage .mobile-mypage-menu > summary :is(strong, small, span) {
    color: var(--mnv-v245-light-primary) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  body.mnv-future-ui.shell-learner.page-mypage .mobile-mypage-menu-grid > a {
    border-color: #d2e2ee !important;
    background: #f8fbff !important;
    color: var(--mnv-v245-light-secondary) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  body.mnv-future-ui.shell-learner.page-mypage .mobile-mypage-menu-grid > a.is-active {
    border-color: #7fb6e3 !important;
    background: #e6f2ff !important;
    color: #155fca !important;
    -webkit-text-fill-color: #155fca !important;
  }

  body.mnv-future-ui :is(
    input:not([type]),
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    select,
    textarea
  ) {
    font-size: 16px;
  }

  body.mnv-future-ui :is(.button, button, input[type="submit"], input[type="button"]) {
    min-height: 44px;
  }

  body.mnv-future-ui .koto-cosmic-hero #koto-hero-title,
  body.mnv-future-ui .koto-cosmic-hero #koto-hero-title > :is(.koto-hero-problem, .koto-solution-band) {
    max-inline-size: 100% !important;
  }
}

@media (max-width: 430px) {
  body.mnv-future-ui.public-app.shell-public.page-index .brand-film-timeline {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.mnv-future-ui .future-utility-dock {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    justify-content: flex-end;
    max-width: none;
  }

  body.mnv-future-ui .future-utility-dock > :is(.luxury-command-fab, .guide-fab, .qr-login-fab, .child-read-aloud) {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 10px;
  }

  body.mnv-future-ui .future-utility-dock > :is(.luxury-command-fab, .guide-fab, .qr-login-fab, .child-read-aloud) span:not([aria-hidden="true"]) {
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  body.mnv-future-ui :is(dialog, .guide-panel, .qr-login-dialog, .mf-command-palette, .mf-detail-drawer, .luxury-command-panel),
  body.mnv-future-ui .mnv-next-action-v243 {
    max-height: calc(100dvh - 12px);
    overflow-y: auto;
  }


  body.mnv-future-ui .assignment-save-intake__card {
    max-block-size: calc(100dvh - 12px);
  }
}

@media (forced-colors: active) {
  body.mnv-future-ui .koto-cosmic-hero #koto-hero-title :is(.koto-hero-problem, .koto-hero-solution, em, strong),
  body.mnv-future-ui .koto-cosmic-hero .koto-hero-promise {
    background: Canvas !important;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
    text-shadow: none !important;
    forced-color-adjust: auto;
  }
}

@media print {
  body.mnv-future-ui .future-utility-dock,
  body.mnv-future-ui .mnv-next-action-v243 {
    visibility: hidden !important;
  }

  body.mnv-future-ui :is(input, select, textarea) {
    background: #fff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }
}