/* === Mode Atlas theme system ===
   One shared colour layer for dark/light mode. Light mode uses a soft tinted
   atlas palette, not a pure white repaint. Page CSS should rely on these
   tokens rather than carrying separate light-mode colour patches. */
:root{
  --ma-font-ui:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ma-font-display:Sora,Inter,system-ui,sans-serif;
  --ma-font-jp:"Noto Sans JP",Inter,system-ui,sans-serif;
  --ma-text-xs:.74rem;
  --ma-text-sm:.82rem;
  --ma-text-md:.95rem;
  --ma-text-lg:1.125rem;
  --ma-weight-medium:650;
  --ma-weight-bold:800;
  --ma-weight-heavy:900;
  --ma-line-body:1.5;

  /* Shared component geometry and motion. */
  --ma-space-1:4px;
  --ma-space-2:8px;
  --ma-space-3:12px;
  --ma-space-4:16px;
  --ma-space-5:20px;
  --ma-space-6:24px;
  --ma-space-8:32px;

  /* Canonical geometry. Shared/page CSS consumes these tokens but does not redefine them. */
  --ma-radius-control:14px;
  --ma-radius-md:18px;
  --ma-radius-card:22px;
  --ma-radius-lg:28px;
  --ma-radius-xl:30px;
  --ma-radius-nav:24px;
  --ma-radius-pill:999px;
  --ma-control-height-sm:38px;
  --ma-control-height:46px;
  --ma-control-height-lg:52px;
  --ma-content-max:1240px;
  --ma-content-wide:1320px;
  --ma-page-gutter:24px;
  --ma-page-gutter-tablet:18px;
  --ma-page-gutter-phone:12px;
  --ma-page-card-padding:24px;
  --ma-page-card-padding-tablet:20px;
  --ma-page-card-padding-phone:16px;
  --ma-page-card-radius:var(--ma-radius-xl);
  --ma-page-card-radius-tablet:26px;
  --ma-page-card-radius-phone:22px;
  --ma-motion-fast:160ms;
  --ma-motion-medium:240ms;
  --ma-icon-size:20px;
  --ma-section-gap:18px;
  --ma-surface-inset:color-mix(in srgb,var(--ma-card-3) 78%,transparent);
  --ma-surface-elevated:var(--ma-surface);
  --ma-status-success-bg:color-mix(in srgb,var(--ma-success) 12%,transparent);
  --ma-status-warning-bg:color-mix(in srgb,var(--ma-warning) 12%,transparent);
  --ma-status-danger-bg:color-mix(in srgb,var(--ma-danger) 12%,transparent);
  --ma-status-info-bg:color-mix(in srgb,var(--ma-info) 12%,transparent);

  --ma-app-bg:#090d18;
  --ma-app-bg-soft:#0d1321;
  --ma-card:#161d2c;
  --ma-card-2:#111827;
  --ma-card-3:#0f1624;
  --ma-border:rgba(255,255,255,.10);
  --ma-border-strong:rgba(255,255,255,.18);
  --ma-text:#eef4ff;
  --ma-text-strong:#f8fbff;
  --ma-muted:#9aa6bd;
  --ma-text-soft:color-mix(in srgb,var(--ma-text) 72%,var(--ma-muted));
  --ma-link:#cfe4ff;
  --ma-reading:#75e3a8;
  --ma-reading-soft:rgba(117,227,168,.16);
  --ma-writing:#7db5ff;
  --ma-writing-soft:rgba(125,181,255,.16);
  --ma-results:#d7b46a;
  --ma-results-soft:rgba(215,180,106,.15);
  --ma-kana:#c9a7ff;
  --ma-kana-soft:rgba(201,167,255,.15);
  --ma-words:#9fc8ff;
  --ma-atlas:#8fc4ff;
  --ma-rose:#ff8fbd;
  --ma-danger:#ff7d8a;
  --ma-warning:#f4c96a;
  --ma-success:#75e3a8;
  --ma-info:#8fc4ff;
  --ma-page-bg:
    radial-gradient(circle at 14% 8%, rgba(125,181,255,.14), transparent 30%),
    radial-gradient(circle at 88% 6%, rgba(117,227,168,.10), transparent 30%),
    linear-gradient(180deg,#090d18 0%,#0d1321 58%,#080b13 100%);
  --ma-page-bg-atlas:
    radial-gradient(circle at 18% 14%,color-mix(in srgb,var(--ma-writing) 22%,transparent),transparent 26%),
    radial-gradient(circle at 86% 18%,color-mix(in srgb,var(--ma-kana) 18%,transparent),transparent 25%),
    radial-gradient(circle at 50% 94%,color-mix(in srgb,var(--ma-reading) 9%,transparent),transparent 32%),
    linear-gradient(180deg,#131827 0%,var(--ma-app-bg) 58%,#030409 100%);
  --ma-page-bg-kana:
    radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--ma-writing) 14%,transparent),transparent 26%),
    radial-gradient(circle at 85% 0%,color-mix(in srgb,var(--ma-rose) 12%,transparent),transparent 24%),
    radial-gradient(circle at 50% 100%,color-mix(in srgb,var(--ma-results) 11%,transparent),transparent 30%),
    linear-gradient(180deg,#171717 0%,#0a0a0a 100%);
  --ma-page-bg-results:
    radial-gradient(circle at top left,color-mix(in srgb,var(--ma-writing) 8%,transparent),transparent 24%),
    radial-gradient(circle at top right,color-mix(in srgb,var(--ma-reading) 8%,transparent),transparent 24%),
    radial-gradient(circle at bottom center,color-mix(in srgb,var(--ma-results) 6%,transparent),transparent 28%),
    linear-gradient(180deg,#24272d 0%,#14171c 100%);
  --ma-page-bg-words:
    radial-gradient(circle at 12% 12%,color-mix(in srgb,var(--ma-rose) 13%,transparent),transparent 24%),
    radial-gradient(circle at 84% 8%,color-mix(in srgb,var(--ma-writing) 12%,transparent),transparent 22%),
    radial-gradient(circle at 50% 100%,color-mix(in srgb,var(--ma-warning) 8%,transparent),transparent 30%),
    linear-gradient(180deg,#151923 0%,#070a11 100%);
  --ma-grid-line:color-mix(in srgb,var(--ma-text) 2.6%,transparent);
  --ma-watermark:color-mix(in srgb,var(--ma-text) 2.5%,transparent);
  --ma-surface:linear-gradient(180deg,rgba(22,29,44,.94),rgba(13,18,30,.92));
  --ma-surface-soft:linear-gradient(180deg,rgba(28,37,56,.90),rgba(17,24,39,.88));
  --ma-surface-strong:linear-gradient(180deg,rgba(15,23,42,.98),rgba(9,13,22,.98));
  --ma-control:linear-gradient(180deg,rgba(21,31,49,.92),rgba(14,21,36,.92));
  --ma-control-hover:linear-gradient(180deg,rgba(31,46,72,.96),rgba(20,30,50,.94));
  --ma-control-active:linear-gradient(180deg,rgba(49,79,128,.72),rgba(28,46,77,.88));
  --ma-control-active-border:rgba(125,181,255,.58);
  --ma-control-text:#eef4ff;
  --ma-focus-ring:rgba(125,181,255,.46);
  --ma-backdrop:rgba(2,6,23,.58);
  --ma-shadow:0 24px 70px rgba(0,0,0,.38);
  --ma-shadow-soft:0 14px 40px rgba(0,0,0,.24);
  --ma-shadow-control:0 10px 24px rgba(0,0,0,.18);

  --bg:var(--ma-app-bg);
  --bg-1:var(--ma-app-bg);
  --bg-2:var(--ma-app-bg-soft);
  --panel:var(--ma-card);
  --panel-2:var(--ma-card-2);
  --panel-strong:var(--ma-card-3);
  --card:var(--ma-card);
  --text:var(--ma-text);
  --muted:var(--ma-muted);
  --line:var(--ma-border);
  --border:var(--ma-border);
  --shadow:var(--ma-shadow);
}

html[data-ma-theme="light"]{
  color-scheme:light;
  --ma-app-bg:#dbe8f3;
  --ma-app-bg-soft:#d2e1ee;
  --ma-card:#e7eff8;
  --ma-card-2:#dbe7f3;
  --ma-card-3:#ccdbea;
  --ma-border:rgba(42,59,88,.20);
  --ma-border-strong:rgba(42,59,88,.34);
  --ma-text:#162238;
  --ma-text-strong:#0b1528;
  --ma-muted:#586a84;
  --ma-link:#174f93;
  --ma-reading:#11704d;
  --ma-reading-soft:rgba(17,112,77,.14);
  --ma-writing:#1d5598;
  --ma-writing-soft:rgba(29,85,152,.14);
  --ma-results:#76510f;
  --ma-results-soft:rgba(118,81,15,.12);
  --ma-danger:#9b2631;
  --ma-warning:#805412;
  --ma-success:#0f6a49;
  --ma-info:#215d9f;
  --ma-kana:#6c45a5;
  --ma-kana-soft:rgba(108,69,165,.12);
  --ma-words:#285f9c;
  --ma-atlas:#215d9f;
  --ma-rose:#9b3f69;
  --ma-page-bg:
    radial-gradient(circle at 8% 6%, rgba(65,142,210,.20), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(130,100,190,.16), transparent 30%),
    radial-gradient(circle at 18% 83%, rgba(38,145,98,.15), transparent 31%),
    radial-gradient(circle at 84% 78%, rgba(202,150,44,.12), transparent 32%),
    linear-gradient(135deg,#d7e7f3 0%,#e0dced 46%,#d8eadf 100%);
  --ma-page-bg-atlas:
    radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--ma-writing) 13%,transparent),transparent 30%),
    radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--ma-kana) 10%,transparent),transparent 30%),
    radial-gradient(circle at 18% 88%,color-mix(in srgb,var(--ma-reading) 9%,transparent),transparent 32%),
    var(--ma-page-bg);
  --ma-page-bg-kana:
    radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--ma-writing) 11%,transparent),transparent 30%),
    radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--ma-rose) 8%,transparent),transparent 30%),
    var(--ma-page-bg);
  --ma-page-bg-results:
    radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--ma-writing) 9%,transparent),transparent 30%),
    radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--ma-reading) 9%,transparent),transparent 30%),
    var(--ma-page-bg);
  --ma-page-bg-words:
    radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--ma-rose) 9%,transparent),transparent 30%),
    radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--ma-writing) 9%,transparent),transparent 30%),
    var(--ma-page-bg);
  --ma-grid-line:color-mix(in srgb,var(--ma-text) 5%,transparent);
  --ma-watermark:color-mix(in srgb,var(--ma-text) 4%,transparent);
  --ma-surface:
    radial-gradient(circle at 0% 0%,rgba(72,134,202,.11),transparent 34%),
    radial-gradient(circle at 100% 8%,rgba(39,139,97,.08),transparent 32%),
    linear-gradient(180deg,rgba(232,241,250,.96),rgba(215,228,241,.92));
  --ma-surface-soft:linear-gradient(180deg,rgba(222,234,247,.94),rgba(204,220,236,.90));
  --ma-surface-strong:linear-gradient(180deg,rgba(239,245,251,.98),rgba(212,226,240,.94));
  --ma-control:linear-gradient(180deg,#dce8f4,#c9d9e9);
  --ma-control-hover:linear-gradient(180deg,#e6eef7,#c2d4e7);
  --ma-control-active:linear-gradient(180deg,#bfd7f2,#98bee8);
  --ma-control-active-border:rgba(38,95,165,.58);
  --ma-control-text:#142136;
  --ma-focus-ring:rgba(38,95,165,.22);
  --ma-backdrop:rgba(19,31,49,.30);
  --ma-shadow:0 24px 70px rgba(42,58,84,.18);
  --ma-shadow-soft:0 14px 42px rgba(42,58,84,.14);
  --ma-shadow-control:0 10px 24px rgba(42,58,84,.10);

  --bg:var(--ma-app-bg);
  --bg-1:var(--ma-app-bg);
  --bg-2:var(--ma-app-bg-soft);
  --panel:var(--ma-card);
  --panel-2:var(--ma-card-2);
  --panel-strong:var(--ma-card-3);
  --card:var(--ma-card);
  --text:var(--ma-text);
  --muted:var(--ma-muted);
  --line:var(--ma-border);
  --border:var(--ma-border);
  --shadow:var(--ma-shadow);
}

body{background:var(--ma-page-bg);color:var(--ma-text);}
html[data-ma-theme="light"] body{
  background:var(--ma-page-bg);
  color:var(--ma-text);
}
html[data-ma-theme="light"] body.ma-atlas-page{background:var(--ma-page-bg-atlas);}
html[data-ma-theme="light"] body.ma-kana-page{background:var(--ma-page-bg-kana);}
html[data-ma-theme="light"] body.ma-results-page{background:var(--ma-page-bg-results);}
html[data-ma-theme="light"] body.ma-wordbank-page{background:var(--ma-page-bg-words);}

/* Light mode readability: page-level CSS may have dark-mode defaults; theme owns
   the final light palette through tokens and scoped component rules. */
html[data-ma-theme="light"] header.glass, html[data-ma-theme="light"] .toolbar{
  background:linear-gradient(135deg,rgba(225,237,249,.94),rgba(204,222,240,.90) 58%,rgba(218,211,235,.90));
  border-color:var(--ma-border);
  color:var(--ma-text);
  box-shadow:var(--ma-shadow-soft);
}

html[data-ma-theme="light"] .hero,
html[data-ma-theme="light"] .landing-hero,
html[data-ma-theme="light"] .hero-panel,
html[data-ma-theme="light"] .hero-card,
html[data-ma-theme="light"] .glass,
html[data-ma-theme="light"] .card,
html[data-ma-theme="light"] .panel,
html[data-ma-theme="light"] .modal-card,
html[data-ma-theme="light"] .popup,
html[data-ma-theme="light"] .bottom-shell,
html[data-ma-theme="light"] .drawer-content,
html[data-ma-theme="light"] .modifier-panel,
html[data-ma-theme="light"] .options-stack>div,
html[data-ma-theme="light"] .ma-kana-pro-card,
html[data-ma-theme="light"] .ma-kana-stat,
html[data-ma-theme="light"] .ma-kana-plan>div,
html[data-ma-theme="light"] .ma-speed-card,
html[data-ma-theme="light"] .ma-mastery-breakdown>div,
html[data-ma-theme="light"] .ma-mini-result-card,
html[data-ma-theme="light"] .ma-result-filter-bar,
html[data-ma-theme="light"] .result-card,
html[data-ma-theme="light"] .test-card,
html[data-ma-theme="light"] .stats-panel,
html[data-ma-theme="light"] #statsPanel,
html[data-ma-theme="light"] .scores-panel,
html[data-ma-theme="light"] .scoreboard,
html[data-ma-theme="light"] .about-card,
html[data-ma-theme="light"] .about-point,
html[data-ma-theme="light"] .ma-shared-profile-drawer,
html[data-ma-theme="light"] .ma-shared-settings-drawer,
html[data-ma-theme="light"] .ma-profile-card,
html[data-ma-theme="light"] .ma-settings-card,
html[data-ma-theme="light"] .ma-account-card,
html[data-ma-theme="light"] .ma-sync-card,
html[data-ma-theme="light"] .ma-branch-card,
html[data-ma-theme="light"] .ma-achievement-card-summary,
html[data-ma-theme="light"] .ma-save-section,
html[data-ma-theme="light"] .ma-settings-panel,
html[data-ma-theme="light"] .ma-result-insights,
html[data-ma-theme="light"] .ma-pro-feature-card,
html[data-ma-theme="light"] .ma-path-step,
html[data-ma-theme="light"] .ma-preset-track,
html[data-ma-theme="light"] .legal-card{
  background:var(--ma-surface);
  border-color:var(--ma-border);
  color:var(--ma-text);
  box-shadow:var(--ma-shadow);
}

html[data-ma-theme="light"] .branch,
html[data-ma-theme="light"] .launch-card,
html[data-ma-theme="light"] .future-card,
html[data-ma-theme="light"] .test-tile{
  background:linear-gradient(145deg,#e8f1fa 0%,#dce8f4 72%,#cfddea 100%);
  border-color:var(--ma-border);
  color:var(--ma-text);
  box-shadow:var(--ma-shadow);
}
html[data-ma-theme="light"] .branch.kana,
html[data-ma-theme="light"] .launch-card.reading,
html[data-ma-theme="light"] .reading-card,
html[data-ma-theme="light"] .ma-action-card.reading{
  background:radial-gradient(circle at 12% 12%,rgba(17,112,77,.18),transparent 38%),linear-gradient(135deg,#e6f2ed 0%,#cfe5da 100%);
  border-color:rgba(17,112,77,.28);
}
html[data-ma-theme="light"] .branch.words,
html[data-ma-theme="light"] .launch-card.writing,
html[data-ma-theme="light"] .writing-card,
html[data-ma-theme="light"] .ma-action-card.writing{
  background:radial-gradient(circle at 12% 12%,rgba(29,85,152,.18),transparent 38%),linear-gradient(135deg,#e8f0fa 0%,#caddef 100%);
  border-color:rgba(29,85,152,.28);
}
html[data-ma-theme="light"] .branch.future,
html[data-ma-theme="light"] .future-tile{
  background:linear-gradient(145deg,rgba(222,233,244,.84),rgba(202,216,231,.82));
  color:var(--ma-text);
  opacity:1;
}
html[data-ma-theme="light"] .branch-bottom,
html[data-ma-theme="light"] .launch-bottom{
  background:transparent;
  border-top-color:rgba(42,59,88,.18);
  color:var(--ma-text);
  box-shadow:none;
}
html[data-ma-theme="light"] .branch-arrow,
html[data-ma-theme="light"] .launch-arrow,
html[data-ma-theme="light"] .branch-chip,
html[data-ma-theme="light"] .launch-badge,
html[data-ma-theme="light"] .pill,
html[data-ma-theme="light"] .badge,
html[data-ma-theme="light"] .ma-kana-pill,
html[data-ma-theme="light"] .chip{
  background:linear-gradient(180deg,rgba(221,232,244,.92),rgba(199,214,229,.86));
  border-color:var(--ma-border);
  color:var(--ma-text);
  box-shadow:var(--ma-shadow-control);
}

html[data-ma-theme="light"] h1, html[data-ma-theme="light"] h2, html[data-ma-theme="light"] h3, html[data-ma-theme="light"] h4, html[data-ma-theme="light"] h5, html[data-ma-theme="light"] .title, html[data-ma-theme="light"] .hero-title, html[data-ma-theme="light"] .main-title, html[data-ma-theme="light"] .branch-title, html[data-ma-theme="light"] .launch-title, html[data-ma-theme="light"] .section-title, html[data-ma-theme="light"] .card-title, html[data-ma-theme="light"] .ma-drawer-title, html[data-ma-theme="light"] .ma-card-title, html[data-ma-theme="light"] .ma-account-name, html[data-ma-theme="light"] .ma-kana-pro-title, html[data-ma-theme="light"] .stat-value, html[data-ma-theme="light"] .metric-value, html[data-ma-theme="light"] .mega-value, html[data-ma-theme="light"] .kana-character, html[data-ma-theme="light"] .prompt-character, html[data-ma-theme="light"] .question-character, html[data-ma-theme="light"] strong{
  color:var(--ma-text-strong);
  -webkit-text-fill-color:var(--ma-text-strong);
  text-shadow:none;
  opacity:1;
}
html[data-ma-theme="light"] p,
html[data-ma-theme="light"] small,
html[data-ma-theme="light"] label,
html[data-ma-theme="light"] .subtitle,
html[data-ma-theme="light"] .subtext,
html[data-ma-theme="light"] .muted,
html[data-ma-theme="light"] .hero-copy,
html[data-ma-theme="light"] .hero-line,
html[data-ma-theme="light"] .hero-tagline,
html[data-ma-theme="light"] .card-sub,
html[data-ma-theme="light"] .branch-copy,
html[data-ma-theme="light"] .launch-copy,
html[data-ma-theme="light"] .section-note,
html[data-ma-theme="light"] .ma-kana-pro-sub,
html[data-ma-theme="light"] .ma-kana-stat .hint,
html[data-ma-theme="light"] .ma-account-email,
html[data-ma-theme="light"] .ma-sync-detail,
html[data-ma-theme="light"] .ma-sync-meta,
html[data-ma-theme="light"] .ma-save-note,
html[data-ma-theme="light"] .ma-settings-label,
html[data-ma-theme="light"] .hint,
html[data-ma-theme="light"] .meta,
html[data-ma-theme="light"] .caption{
  color:var(--ma-muted);
  -webkit-text-fill-color:var(--ma-muted);
  text-shadow:none;
  opacity:1;
}

html[data-ma-theme="light"] a{color:var(--ma-link);}
html[data-ma-theme="light"] .btn, html[data-ma-theme="light"] .button, html[data-ma-theme="light"] button, html[data-ma-theme="light"] .toggle-btn, html[data-ma-theme="light"] .tab-button, html[data-ma-theme="light"] .ma-menu-action, html[data-ma-theme="light"] .ma-settings-choice, html[data-ma-theme="light"] .ma-action-row a, html[data-ma-theme="light"] .ma-action-row button, html[data-ma-theme="light"] .ma-result-filter-bar button, html[data-ma-theme="light"] .ma-dev-btn{
  background:var(--ma-control);
  color:var(--ma-control-text);
  -webkit-text-fill-color:var(--ma-control-text);
  border-color:var(--ma-border);
  box-shadow:var(--ma-shadow-control);
  text-shadow:none;
}
html[data-ma-theme="light"] button:hover, html[data-ma-theme="light"] .toggle-btn:hover, html[data-ma-theme="light"] .ma-menu-action:hover, html[data-ma-theme="light"] .ma-settings-choice:hover{
  background:var(--ma-control-hover);
}
html[data-ma-theme="light"] .btn.active, html[data-ma-theme="light"] .toggle-btn.active, html[data-ma-theme="light"] .toggle-btn[aria-pressed="true"], html[data-ma-theme="light"] .tab-button.active, html[data-ma-theme="light"] .ma-display-option.active, html[data-ma-theme="light"] .ma-sound-toggle.active, html[data-ma-theme="light"] .ma-theme-choice-btn.active, html[data-ma-theme="light"] [data-ma-theme-choice].active{
  background:var(--ma-control-active);
  border-color:var(--ma-control-active-border);
  color:#102e57;
  -webkit-text-fill-color:#102e57;
  box-shadow:0 0 0 4px var(--ma-focus-ring),0 16px 34px rgba(38,95,165,.14);
}
html[data-ma-theme="light"] body.ma-reading-page .bottom-shell .toggle-btn.active,
html[data-ma-theme="light"] body.ma-reading-page .bottom-shell .toggle-btn[aria-pressed="true"]{
  background:linear-gradient(180deg,#cce9d9,#9fd4bc);
  border-color:rgba(17,112,77,.48);
  color:#083421;
  -webkit-text-fill-color:#083421;
  box-shadow:0 0 0 4px rgba(17,112,77,.16),0 16px 34px rgba(17,112,77,.13);
}
html[data-ma-theme="light"] body.ma-writing-page .bottom-shell .toggle-btn.active,
html[data-ma-theme="light"] body.ma-writing-page .bottom-shell .toggle-btn[aria-pressed="true"]{
  background:linear-gradient(180deg,#cfe0f4,#9fbee2);
  border-color:rgba(29,85,152,.48);
  color:#102e57;
  -webkit-text-fill-color:#102e57;
  box-shadow:0 0 0 4px rgba(29,85,152,.16),0 16px 34px rgba(29,85,152,.13);
}

html[data-ma-theme="light"] .mega-score,
html[data-ma-theme="light"] .mega-score.average{
  background:radial-gradient(circle at 92% 0%,rgba(202,150,44,.18),transparent 38%),linear-gradient(135deg,#ebe1c5 0%,#d8c78f 48%,#ece5d3 100%);
  border-color:rgba(132,92,24,.28);
  color:var(--ma-text);
  box-shadow:0 20px 50px rgba(120,85,25,.13);
}
html[data-ma-theme="light"] .mega-score.reading{
  background:radial-gradient(circle at 92% 0%,rgba(17,112,77,.18),transparent 38%),linear-gradient(135deg,#dceee5,#bfdccc);
  border-color:rgba(17,112,77,.25);
}
html[data-ma-theme="light"] .mega-score.writing{
  background:radial-gradient(circle at 92% 0%,rgba(29,85,152,.19),transparent 38%),linear-gradient(135deg,#ddeaf7,#bdd1e9);
  border-color:rgba(29,85,152,.25);
}
html[data-ma-theme="light"] .ma-toast{
  background:linear-gradient(180deg,rgba(222,234,247,.98),rgba(198,215,232,.96));
  color:var(--ma-text);
  border-color:var(--ma-border);
  box-shadow:var(--ma-shadow-soft);
}
html[data-ma-theme="light"] input,
html[data-ma-theme="light"] textarea,
html[data-ma-theme="light"] select{
  background:linear-gradient(180deg,#e4edf7,#d3e1ee);
  color:var(--ma-text);
  -webkit-text-fill-color:var(--ma-text);
  border-color:var(--ma-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-ma-theme="light"] input::placeholder,
html[data-ma-theme="light"] textarea::placeholder{color:#6e7f99;-webkit-text-fill-color:#6e7f99;opacity:1;}

html[data-ma-theme="light"] .progress,
html[data-ma-theme="light"] .ma-progress,
html[data-ma-theme="light"] .meter,
html[data-ma-theme="light"] .bar-track{
  background:rgba(85,105,132,.16);
}
/* Keep branch identity on labels/chips only. Do not colour entire .reading/.writing
   containers, because those classes are also used as card/page wrappers. */
html[data-ma-theme="light"] .ma-kana-pill.reading,
html[data-ma-theme="light"] .reading-label,
html[data-ma-theme="light"] .reading-accent,
html[data-ma-theme="light"] .is-reading{color:var(--ma-reading);}
html[data-ma-theme="light"] .ma-kana-pill.writing,
html[data-ma-theme="light"] .writing-label,
html[data-ma-theme="light"] .writing-accent,
html[data-ma-theme="light"] .is-writing{color:var(--ma-writing);}

/* Light mode contrast pass: central theme ownership for legacy dark page surfaces.
   These rules replace old dark-page backgrounds/text with tinted light surfaces so
   branch pages do not need separate light-mode patches. */
html[data-ma-theme="light"] .atlas-card,
html[data-ma-theme="light"] .constellation,
html[data-ma-theme="light"] .node,
html[data-ma-theme="light"] .main,
html[data-ma-theme="light"] .side-panel,
html[data-ma-theme="light"] .panel-content,
html[data-ma-theme="light"] .score-block,
html[data-ma-theme="light"] .mini-panel,
html[data-ma-theme="light"] .quick-compare,
html[data-ma-theme="light"] .status-card,
html[data-ma-theme="light"] .summary-card,
html[data-ma-theme="light"] .summary-panel,
html[data-ma-theme="light"] .metric,
html[data-ma-theme="light"] .mini-stat,
html[data-ma-theme="light"] .meta-card,
html[data-ma-theme="light"] .mega-inline-card,
html[data-ma-theme="light"] .row-doughnut-card,
html[data-ma-theme="light"] .row-tooltip,
html[data-ma-theme="light"] .row-view-toggle,
html[data-ma-theme="light"] .result-kana-stat,
html[data-ma-theme="light"] .cell.reference,
html[data-ma-theme="light"] .table-row,
html[data-ma-theme="light"] .word-row{
  background:var(--ma-surface);
  border-color:var(--ma-border);
  color:var(--ma-text);
  box-shadow:var(--ma-shadow-soft);
}

html[data-ma-theme="light"] .main{
  background:radial-gradient(circle at 14% 0%,rgba(17,112,77,.14),transparent 34%),
             linear-gradient(180deg,rgba(225,237,249,.98),rgba(202,219,236,.94));
  border-color:rgba(17,112,77,.28);
}
html[data-ma-theme="light"] body.ma-writing-page .main{
  background:radial-gradient(circle at 14% 0%,rgba(29,85,152,.15),transparent 34%),
             linear-gradient(180deg,rgba(226,237,249,.98),rgba(199,216,235,.94));
  border-color:rgba(29,85,152,.28);
}
html[data-ma-theme="light"] body.test-mode-active .main,
html[data-ma-theme="light"] body.daily-challenge-active .main{
  background:radial-gradient(circle at 50% 0%,rgba(202,150,44,.15),transparent 34%),
             linear-gradient(180deg,rgba(228,238,248,.98),rgba(204,220,236,.94));
  border-color:rgba(118,81,15,.26);
}

html[data-ma-theme="light"] .atlas-card{
  background:radial-gradient(circle at 82% 16%,rgba(38,95,165,.16),transparent 32%),
             radial-gradient(circle at 12% 84%,rgba(17,112,77,.12),transparent 28%),
             linear-gradient(145deg,rgba(229,239,249,.96),rgba(203,218,235,.92));
  border-color:rgba(42,59,88,.22);
}
html[data-ma-theme="light"] .atlas-card::before{
  background:linear-gradient(135deg,rgba(255,255,255,.30),transparent 34%),
             radial-gradient(circle at 68% 44%,rgba(202,150,44,.13),transparent 28%);
}
html[data-ma-theme="light"] .constellation{
  background:radial-gradient(circle at 50% 46%,rgba(38,95,165,.12),transparent 10%),
             radial-gradient(circle at 20% 26%,rgba(29,85,152,.18),transparent 10%),
             radial-gradient(circle at 80% 22%,rgba(130,100,190,.14),transparent 10%),
             radial-gradient(circle at 28% 78%,rgba(17,112,77,.13),transparent 10%),
             linear-gradient(145deg,rgba(224,235,247,.74),rgba(194,210,229,.66));
}
html[data-ma-theme="light"] .constellation::before{
  background:linear-gradient(32deg,transparent 0 22%,rgba(42,59,88,.18) 22.2%,transparent 22.6% 100%),
             linear-gradient(148deg,transparent 0 20%,rgba(42,59,88,.13) 20.2%,transparent 20.55% 100%),
             linear-gradient(78deg,transparent 0 43%,rgba(42,59,88,.16) 43.2%,transparent 43.55% 100%),
             linear-gradient(118deg,transparent 0 62%,rgba(42,59,88,.13) 62.2%,transparent 62.55% 100%);
}
html[data-ma-theme="light"] .node{
  background:linear-gradient(180deg,rgba(231,240,249,.94),rgba(203,218,234,.86));
  border-color:rgba(42,59,88,.24);
  color:var(--ma-text-strong);
  box-shadow:var(--ma-shadow-control);
}

html[data-ma-theme="light"] .panel-header,
html[data-ma-theme="light"] .drawer-content,
html[data-ma-theme="light"] .bottom-shell,
html[data-ma-theme="light"] .bottom-shell.ma-modifiers-only{
  background:linear-gradient(180deg,rgba(222,235,247,.97),rgba(198,215,233,.95));
  border-color:var(--ma-border);
  color:var(--ma-text);
  box-shadow:var(--ma-shadow-soft);
}

html[data-ma-theme="light"] .hero-title,
html[data-ma-theme="light"] .hero-line,
html[data-ma-theme="light"] .hero-lead,
html[data-ma-theme="light"] .subline,
html[data-ma-theme="light"] .score-row,
html[data-ma-theme="light"] .panel-header,
html[data-ma-theme="light"] .row-performance-head,
html[data-ma-theme="light"] .row-doughnut-label,
html[data-ma-theme="light"] .row-doughnut-value,
html[data-ma-theme="light"] .row-tooltip,
html[data-ma-theme="light"] .heatmap-row-label,
html[data-ma-theme="light"] .result-kana-stat .label,
html[data-ma-theme="light"] .result-kana-stat .value,
html[data-ma-theme="light"] .metric .label,
html[data-ma-theme="light"] .metric .value,
html[data-ma-theme="light"] .summary-label,
html[data-ma-theme="light"] .summary-value,
html[data-ma-theme="light"] .cell.reference,
html[data-ma-theme="light"] .cell.reference .cell-char,
html[data-ma-theme="light"] .cell.reference .cell-time,
html[data-ma-theme="light"] .branch-label,
html[data-ma-theme="light"] .branch-bottom,
html[data-ma-theme="light"] .future-tile strong,
html[data-ma-theme="light"] .future-tile span,
html[data-ma-theme="light"] .game-over-answer{
  color:var(--ma-text);
  -webkit-text-fill-color:var(--ma-text);
  text-shadow:none;
  opacity:1;
}
html[data-ma-theme="light"] .hero-line,
html[data-ma-theme="light"] .hero-lead,
html[data-ma-theme="light"] .subline,
html[data-ma-theme="light"] .score-row span:first-child,
html[data-ma-theme="light"] .metric .label,
html[data-ma-theme="light"] .summary-label,
html[data-ma-theme="light"] .row-doughnut-value,
html[data-ma-theme="light"] .result-kana-stat .label,
html[data-ma-theme="light"] .node span,
html[data-ma-theme="light"] .future-tile span{
  color:var(--ma-muted);
  -webkit-text-fill-color:var(--ma-muted);
}

html[data-ma-theme="light"] .cell,
html[data-ma-theme="light"] button.cell,
html[data-ma-theme="light"] .heatmap .cell,
html[data-ma-theme="light"] .heatmap .cell-char,
html[data-ma-theme="light"] .heatmap .cell-time{
  color:#0f1c31;
  -webkit-text-fill-color:#0f1c31;
  text-shadow:none;
}
html[data-ma-theme="light"] .cell.correct,
html[data-ma-theme="light"] .cell.good,
html[data-ma-theme="light"] .cell.green{
  background:linear-gradient(180deg,#5fc879,#2f8f45);
  border-color:rgba(19,95,44,.42);
  color:#06151c;
  -webkit-text-fill-color:#06151c;
}
html[data-ma-theme="light"] .cell.wrong,
html[data-ma-theme="light"] .cell.bad,
html[data-ma-theme="light"] .cell.red{
  background:linear-gradient(180deg,#ee7d7d,#c94949);
  border-color:rgba(150,34,34,.42);
  color:#06151c;
  -webkit-text-fill-color:#06151c;
}
html[data-ma-theme="light"] .cell.slow,
html[data-ma-theme="light"] .cell.yellow{
  background:linear-gradient(180deg,#e5bd51,#c8992e);
  border-color:rgba(128,84,18,.42);
  color:#06151c;
  -webkit-text-fill-color:#06151c;
}

html[data-ma-theme="light"] .cell-badge.fastest,
html[data-ma-theme="light"] .row-flag.best{
  color:#0b6b45;
  -webkit-text-fill-color:#0b6b45;
  background:rgba(17,112,77,.12);
  border-color:rgba(17,112,77,.26);
}
html[data-ma-theme="light"] .cell-badge.slowest,
html[data-ma-theme="light"] .row-flag.slowest{
  color:#76510f;
  -webkit-text-fill-color:#76510f;
  background:rgba(202,150,44,.14);
  border-color:rgba(202,150,44,.30);
}
html[data-ma-theme="light"] .row-flag.worst{
  color:#9b2631;
  -webkit-text-fill-color:#9b2631;
  background:rgba(155,38,49,.10);
  border-color:rgba(155,38,49,.28);
}

html[data-ma-theme="light"] .btn-start,
html[data-ma-theme="light"] .button.primary{
  background:linear-gradient(180deg,#e8f3ff,#c9def4);
  color:#10223a;
  -webkit-text-fill-color:#10223a;
  border-color:rgba(38,95,165,.25);
}
html[data-ma-theme="light"] .game-over-title{
  color:#9b2631;
  -webkit-text-fill-color:#9b2631;
}

@media (prefers-contrast: more){
  html[data-ma-theme="light"]{
    --ma-text:#071226;
    --ma-text-strong:#020817;
    --ma-muted:#354760;
    --ma-border:rgba(20,36,62,.34);
  }
}


/* === Light mode component integration: final contrast cleanup ===
   Remaining branch components now resolve to shared theme tokens in light mode.
   This keeps light mode tinted and readable without changing dark-mode styling. */
html[data-ma-theme="light"]{
  --ma-light-panel:linear-gradient(180deg,rgba(225,236,247,.96),rgba(202,217,234,.92));
  --ma-light-panel-strong:linear-gradient(180deg,rgba(232,241,250,.98),rgba(203,219,236,.96));
  --ma-light-panel-soft:linear-gradient(180deg,rgba(219,232,245,.90),rgba(196,213,232,.84));
}

html[data-ma-theme="light"] .session-list,
html[data-ma-theme="light"] .session-end-card,
html[data-ma-theme="light"] .game-over,
html[data-ma-theme="light"] .game-over-panel,
html[data-ma-theme="light"] .session-summary{
  background:var(--ma-light-panel-strong);
  border-color:var(--ma-border);
  color:var(--ma-text);
  -webkit-text-fill-color:initial;
  box-shadow:var(--ma-shadow);
}

html[data-ma-theme="light"] .ma-about-hero,
html[data-ma-theme="light"] .ma-about-card,
html[data-ma-theme="light"] .ma-about-section,
html[data-ma-theme="light"] .ma-about-table>div,
html[data-ma-theme="light"] .ma-about-list li,
html[data-ma-theme="light"] .stat-card,
html[data-ma-theme="light"] .result-kana-stat,
html[data-ma-theme="light"] .metric,
html[data-ma-theme="light"] .mini-panel,
html[data-ma-theme="light"] .duo-chip,
html[data-ma-theme="light"] .mega-inline-card,
html[data-ma-theme="light"] .summary-card,
html[data-ma-theme="light"] .score-block,
html[data-ma-theme="light"] .score-pill,
html[data-ma-theme="light"] .score-row,
html[data-ma-theme="light"] .panel-row,
html[data-ma-theme="light"] .result-detail-card,
html[data-ma-theme="light"] .detail-card,
html[data-ma-theme="light"] .selected-result,
html[data-ma-theme="light"] .result-summary-card,
html[data-ma-theme="light"] .ma-achievement,
html[data-ma-theme="light"] .ma-achievement-section,
html[data-ma-theme="light"] .ma-mastery-summary span,
html[data-ma-theme="light"] .ma-mastery-cell{
  background:var(--ma-light-panel-soft);
  border-color:rgba(42,59,88,.20);
  color:var(--ma-text);
  -webkit-text-fill-color:initial;
  box-shadow:var(--ma-shadow-soft);
}

html[data-ma-theme="light"] .session-summary *,
html[data-ma-theme="light"] .game-over *{
  text-shadow:none;
}

html[data-ma-theme="light"] .ma-about-card strong,
html[data-ma-theme="light"] .ma-about-section h3,
html[data-ma-theme="light"] .ma-about-table strong,
html[data-ma-theme="light"] .stat-card .value,
html[data-ma-theme="light"] .session-list h3,
html[data-ma-theme="light"] .game-over-title,
html[data-ma-theme="light"] .game-over h2,
html[data-ma-theme="light"] .game-over h3,
html[data-ma-theme="light"] .result-title,
html[data-ma-theme="light"] .section-title,
html[data-ma-theme="light"] .ma-achievement strong,
html[data-ma-theme="light"] .ma-mastery-summary b,
html[data-ma-theme="light"] .ma-achievement-detail strong,
html[data-ma-theme="light"] .ma-ach-info-body h3{
  color:var(--ma-text-strong);
  -webkit-text-fill-color:var(--ma-text-strong);
}

html[data-ma-theme="light"] .ma-about-kicker,
html[data-ma-theme="light"] .ma-about-hero p,
html[data-ma-theme="light"] .ma-about-card span,
html[data-ma-theme="light"] .ma-about-card small,
html[data-ma-theme="light"] .ma-about-section p,
html[data-ma-theme="light"] .ma-about-table span,
html[data-ma-theme="light"] .stat-card .label,
html[data-ma-theme="light"] .result-kana-stat .label,
html[data-ma-theme="light"] .game-over-answer,
html[data-ma-theme="light"] .ma-achievement span,
html[data-ma-theme="light"] .ma-mastery-legend span{
  color:var(--ma-muted);
  -webkit-text-fill-color:var(--ma-muted);
}

html[data-ma-theme="light"] .ma-about-tabs button,
html[data-ma-theme="light"] .game-over button,
html[data-ma-theme="light"] .game-over .btn,
html[data-ma-theme="light"] .ma-mastery-open-btn{
  background:var(--ma-control);
  border-color:var(--ma-border);
  color:var(--ma-control-text);
  -webkit-text-fill-color:var(--ma-control-text);
  box-shadow:var(--ma-shadow-control);
}
html[data-ma-theme="light"] .ma-about-tabs button.active,
html[data-ma-theme="light"] .game-over .primary{
  background:var(--ma-control-active);
  border-color:var(--ma-control-active-border);
  color:#102e57;
  -webkit-text-fill-color:#102e57;
}

html[data-ma-theme="light"] .tag.reading,
html[data-ma-theme="light"] .mode-tag.reading,
html[data-ma-theme="light"] .mini-label.reading,
html[data-ma-theme="light"] .summary-mode.reading,
html[data-ma-theme="light"] .mega-inline-card.reading .label,
html[data-ma-theme="light"] .metric.reading .label,
html[data-ma-theme="light"] .reading-label,
html[data-ma-theme="light"] .is-reading{
  color:var(--ma-reading);
  -webkit-text-fill-color:var(--ma-reading);
}
html[data-ma-theme="light"] .tag.writing,
html[data-ma-theme="light"] .mode-tag.writing,
html[data-ma-theme="light"] .mini-label.writing,
html[data-ma-theme="light"] .summary-mode.writing,
html[data-ma-theme="light"] .mega-inline-card.writing .label,
html[data-ma-theme="light"] .metric.writing .label,
html[data-ma-theme="light"] .writing-label,
html[data-ma-theme="light"] .is-writing{
  color:var(--ma-writing);
  -webkit-text-fill-color:var(--ma-writing);
}
html[data-ma-theme="light"] .tag.reading,
html[data-ma-theme="light"] .mode-tag.reading{background:var(--ma-reading-soft);border-color:rgba(17,112,77,.24);}
html[data-ma-theme="light"] .tag.writing,
html[data-ma-theme="light"] .mode-tag.writing{background:var(--ma-writing-soft);border-color:rgba(29,85,152,.24);}

html[data-ma-theme="light"] .pulse-mode-box,
html[data-ma-theme="light"] .pulse-card,
html[data-ma-theme="light"] .quick-compare,
html[data-ma-theme="light"] .today-card,
html[data-ma-theme="light"] .status-box,
html[data-ma-theme="light"] .ma-kana-dashboard-card{
  background:var(--ma-light-panel);
  border-color:rgba(42,59,88,.20);
  color:var(--ma-text);
}
html[data-ma-theme="light"] .pulse-mode-box.reading{background:radial-gradient(circle at 8% 4%,rgba(17,112,77,.12),transparent 34%),var(--ma-light-panel);}
html[data-ma-theme="light"] .pulse-mode-box.writing{background:radial-gradient(circle at 8% 4%,rgba(29,85,152,.13),transparent 34%),var(--ma-light-panel);}
html[data-ma-theme="light"] .pulse-mode-box .pulse-copy,
html[data-ma-theme="light"] .pulse-mode-box .mode-copy,
html[data-ma-theme="light"] .today-card,
html[data-ma-theme="light"] .quick-compare span{color:var(--ma-muted);-webkit-text-fill-color:var(--ma-muted);}

html[data-ma-theme="light"] .mega-score .mega-kicker,
html[data-ma-theme="light"] .mega-score .mega-sub,
html[data-ma-theme="light"] .heatmap-row-label,
html[data-ma-theme="light"] .row-performance-head,
html[data-ma-theme="light"] .row-help,
html[data-ma-theme="light"] .hover-help{
  color:var(--ma-muted);
  -webkit-text-fill-color:var(--ma-muted);
}
html[data-ma-theme="light"] .mega-score .mega-value,
html[data-ma-theme="light"] .summary-value,
html[data-ma-theme="light"] .summary-label,
html[data-ma-theme="light"] .mega-inline-card .value,
html[data-ma-theme="light"] .metric .value{
  color:var(--ma-text-strong);
  -webkit-text-fill-color:var(--ma-text-strong);
}

html[data-ma-theme="light"] .ma-loading-screen{background:rgba(215,230,243,.76);}
html[data-ma-theme="light"] .ma-loading-card{background:var(--ma-light-panel-strong);border-color:var(--ma-border);color:var(--ma-text);}


html[data-ma-theme="light"] .ma-preset-toggle{
  color:var(--ma-text,#10203a);
}
html[data-ma-theme="light"] .ma-preset-toggle small{
  color:var(--ma-muted,#5f728d);
}
html[data-ma-theme="light"] body.ma-reading-page .ma-preset-toggle.active,
html[data-ma-theme="light"] body.ma-reading-page .ma-preset-toggle[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(40,166,112,.20),rgba(40,166,112,.09));
  border-color:rgba(28,140,91,.58);
  color:#103322;
}
html[data-ma-theme="light"] body.ma-writing-page .ma-preset-toggle.active,
html[data-ma-theme="light"] body.ma-writing-page .ma-preset-toggle[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(66,133,224,.20),rgba(66,133,224,.08));
  border-color:rgba(57,108,190,.58);
  color:#102a4d;
}