/* === 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-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-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-danger:#ff7d8a;
  --ma-warning:#f4c96a;
  --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-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-danger:#9b2631;
  --ma-warning:#805412;
  --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-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,
html[data-ma-theme="light"] .app,
html[data-ma-theme="light"] .app-shell,
html[data-ma-theme="light"] .page-shell,
html[data-ma-theme="light"] .page,
html[data-ma-theme="light"] main,
html[data-ma-theme="light"] .shell{
  background:var(--ma-page-bg)!important;
  color:var(--ma-text)!important;
}

/* 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"] .topbar,
html[data-ma-theme="light"] .site-header,
html[data-ma-theme="light"] .navbar,
html[data-ma-theme="light"] .branch-nav,
html[data-ma-theme="light"] .study-nav,
html[data-ma-theme="light"] .nav-shell,
html[data-ma-theme="light"] .app-nav,
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))!important;
  border-color:var(--ma-border)!important;
  color:var(--ma-text)!important;
  box-shadow:var(--ma-shadow-soft)!important;
}

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,
html[data-ma-theme="light"] .modal-card,
html[data-ma-theme="light"] .popup,
html[data-ma-theme="light"] .import-modal,
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-preset-menu,
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-session-preview,
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"] .word-card,
html[data-ma-theme="light"] .wordbank-card,
html[data-ma-theme="light"] .word-form,
html[data-ma-theme="light"] .word-list,
html[data-ma-theme="light"] .table-card,
html[data-ma-theme="light"] .legal-card{
  background:var(--ma-surface)!important;
  border-color:var(--ma-border)!important;
  color:var(--ma-text)!important;
  box-shadow:var(--ma-shadow)!important;
}

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%)!important;
  border-color:var(--ma-border)!important;
  color:var(--ma-text)!important;
  box-shadow:var(--ma-shadow)!important;
}
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%)!important;
  border-color:rgba(17,112,77,.28)!important;
}
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%)!important;
  border-color:rgba(29,85,152,.28)!important;
}
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))!important;
  color:var(--ma-text)!important;
  opacity:1!important;
}
html[data-ma-theme="light"] .branch-bottom,
html[data-ma-theme="light"] .launch-bottom{
  background:transparent!important;
  border-top-color:rgba(42,59,88,.18)!important;
  color:var(--ma-text)!important;
  box-shadow:none!important;
}
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))!important;
  border-color:var(--ma-border)!important;
  color:var(--ma-text)!important;
  box-shadow:var(--ma-shadow-control)!important;
}

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"] .study-title,
html[data-ma-theme="light"] .brand-name,
html[data-ma-theme="light"] .branch-name,
html[data-ma-theme="light"] .branch-kicker,
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)!important;
  -webkit-text-fill-color:var(--ma-text-strong)!important;
  text-shadow:none!important;
  opacity:1!important;
}
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)!important;
  -webkit-text-fill-color:var(--ma-muted)!important;
  text-shadow:none!important;
  opacity:1!important;
}

html[data-ma-theme="light"] a{color:var(--ma-link);}
html[data-ma-theme="light"] .nav-link,
html[data-ma-theme="light"] .branch-link,
html[data-ma-theme="light"] .study-link,
html[data-ma-theme="light"] .study-nav-btn,
html[data-ma-theme="light"] .profile-trigger,
html[data-ma-theme="light"] .ma-settings-trigger,
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-preset-btn,
html[data-ma-theme="light"] .ma-menu-action,
html[data-ma-theme="light"] .ma-settings-choice,
html[data-ma-theme="light"] .ma-ui-btn,
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)!important;
  color:var(--ma-control-text)!important;
  -webkit-text-fill-color:var(--ma-control-text)!important;
  border-color:var(--ma-border)!important;
  box-shadow:var(--ma-shadow-control)!important;
  text-shadow:none!important;
}
html[data-ma-theme="light"] .nav-link:hover,
html[data-ma-theme="light"] .branch-link:hover,
html[data-ma-theme="light"] .study-link:hover,
html[data-ma-theme="light"] .study-nav-btn:hover,
html[data-ma-theme="light"] .profile-trigger:hover,
html[data-ma-theme="light"] button:hover,
html[data-ma-theme="light"] .toggle-btn:hover,
html[data-ma-theme="light"] .ma-preset-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)!important;
}
html[data-ma-theme="light"] .nav-link.active,
html[data-ma-theme="light"] .branch-link.active,
html[data-ma-theme="light"] .study-link.active,
html[data-ma-theme="light"] .study-nav-btn.active,
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-preset-btn.active,
html[data-ma-theme="light"] .ma-preset-btn[aria-pressed="true"],
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)!important;
  border-color:var(--ma-control-active-border)!important;
  color:#102e57!important;
  -webkit-text-fill-color:#102e57!important;
  box-shadow:0 0 0 4px var(--ma-focus-ring),0 16px 34px rgba(38,95,165,.14)!important;
}
html[data-ma-theme="light"] body.ma-reading-page .ma-preset-btn.active,
html[data-ma-theme="light"] body.ma-reading-page .ma-preset-btn[aria-pressed="true"],
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)!important;
  border-color:rgba(17,112,77,.48)!important;
  color:#083421!important;
  -webkit-text-fill-color:#083421!important;
  box-shadow:0 0 0 4px rgba(17,112,77,.16),0 16px 34px rgba(17,112,77,.13)!important;
}
html[data-ma-theme="light"] body.ma-writing-page .ma-preset-btn.active,
html[data-ma-theme="light"] body.ma-writing-page .ma-preset-btn[aria-pressed="true"],
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)!important;
  border-color:rgba(29,85,152,.48)!important;
  color:#102e57!important;
  -webkit-text-fill-color:#102e57!important;
  box-shadow:0 0 0 4px rgba(29,85,152,.16),0 16px 34px rgba(29,85,152,.13)!important;
}

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%)!important;
  border-color:rgba(132,92,24,.28)!important;
  color:var(--ma-text)!important;
  box-shadow:0 20px 50px rgba(120,85,25,.13)!important;
}
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)!important;
  border-color:rgba(17,112,77,.25)!important;
}
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)!important;
  border-color:rgba(29,85,152,.25)!important;
}
html[data-ma-theme="light"] .ma-toast{
  background:linear-gradient(180deg,rgba(222,234,247,.98),rgba(198,215,232,.96))!important;
  color:var(--ma-text)!important;
  border-color:var(--ma-border)!important;
  box-shadow:var(--ma-shadow-soft)!important;
}
html[data-ma-theme="light"] input,
html[data-ma-theme="light"] textarea,
html[data-ma-theme="light"] select{
  background:linear-gradient(180deg,#e4edf7,#d3e1ee)!important;
  color:var(--ma-text)!important;
  -webkit-text-fill-color:var(--ma-text)!important;
  border-color:var(--ma-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;
}
html[data-ma-theme="light"] input::placeholder,
html[data-ma-theme="light"] textarea::placeholder{color:#6e7f99!important;-webkit-text-fill-color:#6e7f99!important;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)!important;
}
html[data-ma-theme="light"] .ma-drawer-backdrop,
html[data-ma-theme="light"] .modal-backdrop{background:var(--ma-backdrop)!important;}

/* 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)!important;}
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)!important;}

/* 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"] .modal-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)!important;
  border-color:var(--ma-border)!important;
  color:var(--ma-text)!important;
  box-shadow:var(--ma-shadow-soft)!important;
}

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))!important;
  border-color:rgba(17,112,77,.28)!important;
}
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))!important;
  border-color:rgba(29,85,152,.28)!important;
}
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))!important;
  border-color:rgba(118,81,15,.26)!important;
}

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))!important;
  border-color:rgba(42,59,88,.22)!important;
}
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%)!important;
}
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))!important;
}
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%)!important;
}
html[data-ma-theme="light"] .node{
  background:linear-gradient(180deg,rgba(231,240,249,.94),rgba(203,218,234,.86))!important;
  border-color:rgba(42,59,88,.24)!important;
  color:var(--ma-text-strong)!important;
  box-shadow:var(--ma-shadow-control)!important;
}

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))!important;
  border-color:var(--ma-border)!important;
  color:var(--ma-text)!important;
  box-shadow:var(--ma-shadow-soft)!important;
}

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"] .modal-stat .label,
html[data-ma-theme="light"] .modal-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-extra,
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)!important;
  -webkit-text-fill-color:var(--ma-text)!important;
  text-shadow:none!important;
  opacity:1!important;
}
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"] .summary-extra,
html[data-ma-theme="light"] .row-doughnut-value,
html[data-ma-theme="light"] .modal-stat .label,
html[data-ma-theme="light"] .node span,
html[data-ma-theme="light"] .future-tile span{
  color:var(--ma-muted)!important;
  -webkit-text-fill-color:var(--ma-muted)!important;
}

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!important;
  -webkit-text-fill-color:#0f1c31!important;
  text-shadow:none!important;
}
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)!important;
  border-color:rgba(19,95,44,.42)!important;
  color:#06151c!important;
  -webkit-text-fill-color:#06151c!important;
}
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)!important;
  border-color:rgba(150,34,34,.42)!important;
  color:#06151c!important;
  -webkit-text-fill-color:#06151c!important;
}
html[data-ma-theme="light"] .cell.slow,
html[data-ma-theme="light"] .cell.yellow{
  background:linear-gradient(180deg,#e5bd51,#c8992e)!important;
  border-color:rgba(128,84,18,.42)!important;
  color:#06151c!important;
  -webkit-text-fill-color:#06151c!important;
}

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

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

@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"] .ma-about-backdrop,
html[data-ma-theme="light"] .ma-feature-backdrop,
html[data-ma-theme="light"] .ma-ach-info-backdrop,
html[data-ma-theme="light"] .modal-backdrop{
  background:rgba(30,45,67,.28)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}

html[data-ma-theme="light"] .ma-about-modal,
html[data-ma-theme="light"] .ma-feature-panel,
html[data-ma-theme="light"] .ma-ach-info-panel,
html[data-ma-theme="light"] .modal,
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,
html[data-ma-theme="light"] .modal-actions{
  background:var(--ma-light-panel-strong)!important;
  border-color:var(--ma-border)!important;
  color:var(--ma-text)!important;
  -webkit-text-fill-color:initial!important;
  box-shadow:var(--ma-shadow)!important;
}

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"] .modal-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"] .summary-row,
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)!important;
  border-color:rgba(42,59,88,.20)!important;
  color:var(--ma-text)!important;
  -webkit-text-fill-color:initial!important;
  box-shadow:var(--ma-shadow-soft)!important;
}

html[data-ma-theme="light"] .ma-about-modal *,
html[data-ma-theme="light"] .modal *,
html[data-ma-theme="light"] .session-summary *,
html[data-ma-theme="light"] .game-over *,
html[data-ma-theme="light"] .ma-feature-panel *,
html[data-ma-theme="light"] .ma-ach-info-panel *{
  text-shadow:none!important;
}

html[data-ma-theme="light"] .ma-about-hero h2,
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"] .modal h2,
html[data-ma-theme="light"] .modal h3,
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-modal-head h2,
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)!important;
  -webkit-text-fill-color:var(--ma-text-strong)!important;
}

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"] .modal-stat .label,
html[data-ma-theme="light"] .game-over-answer,
html[data-ma-theme="light"] .ma-modal-head p,
html[data-ma-theme="light"] .ma-achievement span,
html[data-ma-theme="light"] .ma-mastery-legend span{
  color:var(--ma-muted)!important;
  -webkit-text-fill-color:var(--ma-muted)!important;
}

html[data-ma-theme="light"] .ma-about-tabs button,
html[data-ma-theme="light"] .ma-about-close,
html[data-ma-theme="light"] .ma-about-primary,
html[data-ma-theme="light"] .modal-close,
html[data-ma-theme="light"] .modal-actions 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,
html[data-ma-theme="light"] .ma-modal-head button{
  background:var(--ma-control)!important;
  border-color:var(--ma-border)!important;
  color:var(--ma-control-text)!important;
  -webkit-text-fill-color:var(--ma-control-text)!important;
  box-shadow:var(--ma-shadow-control)!important;
}
html[data-ma-theme="light"] .ma-about-tabs button.active,
html[data-ma-theme="light"] .modal-actions button.primary,
html[data-ma-theme="light"] .game-over .primary{
  background:var(--ma-control-active)!important;
  border-color:var(--ma-control-active-border)!important;
  color:#102e57!important;
  -webkit-text-fill-color:#102e57!important;
}

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"] .summary-row .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)!important;
  -webkit-text-fill-color:var(--ma-reading)!important;
}
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"] .summary-row .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)!important;
  -webkit-text-fill-color:var(--ma-writing)!important;
}
html[data-ma-theme="light"] .tag.reading,
html[data-ma-theme="light"] .mode-tag.reading{background:var(--ma-reading-soft)!important;border-color:rgba(17,112,77,.24)!important;}
html[data-ma-theme="light"] .tag.writing,
html[data-ma-theme="light"] .mode-tag.writing{background:var(--ma-writing-soft)!important;border-color:rgba(29,85,152,.24)!important;}

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)!important;
  border-color:rgba(42,59,88,.20)!important;
  color:var(--ma-text)!important;
}
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)!important;}
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)!important;}
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)!important;-webkit-text-fill-color:var(--ma-muted)!important;}

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)!important;
  -webkit-text-fill-color:var(--ma-muted)!important;
}
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)!important;
  -webkit-text-fill-color:var(--ma-text-strong)!important;
}

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


html[data-ma-theme="light"] .ma-preset-toggle{
  color:var(--ma-text,#10203a) !important;
}
html[data-ma-theme="light"] .ma-preset-toggle small{
  color:var(--ma-muted,#5f728d) !important;
}
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)) !important;
  border-color:rgba(28,140,91,.58) !important;
  color:#103322 !important;
}
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)) !important;
  border-color:rgba(57,108,190,.58) !important;
  color:#102a4d !important;
}