/* Mode Atlas app-wide QOL shell */ :root{ --ma-app-bg:#090d18; --ma-app-bg-soft:#111827; --ma-card:#151c2b; --ma-card-2:#1b2435; --ma-border:rgba(255,255,255,.10); --ma-border-strong:rgba(255,255,255,.18); --ma-text:#f8fafc; --ma-muted:#9aa6bd; --ma-reading:#75e3a8; --ma-reading-soft:rgba(117,227,168,.14); --ma-writing:#7db5ff; --ma-writing-soft:rgba(125,181,255,.14); --ma-results:#d7b46a; --ma-danger:#ff6b6b; --ma-warning:#ffbd67; --ma-radius-lg:28px; --ma-radius-md:18px; --ma-radius-pill:999px; --ma-control-height:46px; --ma-shadow:0 24px 70px rgba(0,0,0,.38); color-scheme:dark; } html[data-ma-theme="light"]{ --ma-app-bg:#f5f7fb; --ma-app-bg-soft:#ffffff; --ma-card:#ffffff; --ma-card-2:#f1f5fb; --ma-border:rgba(15,23,42,.12); --ma-border-strong:rgba(15,23,42,.20); --ma-text:#0f172a; --ma-muted:#5c667a; --ma-reading:#15945d; --ma-reading-soft:rgba(21,148,93,.13); --ma-writing:#236dc8; --ma-writing-soft:rgba(35,109,200,.13); --ma-results:#9a6b18; --ma-danger:#cc3333; --ma-warning:#af6b15; --ma-shadow:0 20px 54px rgba(15,23,42,.14); color-scheme:light; } html[data-ma-theme="light"] body{background:radial-gradient(circle at 20% 10%, rgba(125,181,255,.22), transparent 28%),linear-gradient(180deg,#f8fafc,#eef3fa)!important;color:var(--ma-text)!important;} html[data-ma-theme="light"] .glass, html[data-ma-theme="light"] .card, html[data-ma-theme="light"] .panel, html[data-ma-theme="light"] .mini-panel, html[data-ma-theme="light"] .profile-drawer, html[data-ma-theme="light"] #profileDrawer, html[data-ma-theme="light"] .drawer-panel{background:rgba(255,255,255,.86)!important;border-color:var(--ma-border)!important;color:var(--ma-text)!important;box-shadow:var(--ma-shadow)!important;} html[data-ma-theme="light"] .profile-drawer, html[data-ma-theme="light"] #profileDrawer{background:radial-gradient(circle at top right, rgba(125,181,255,.20), transparent 34%),rgba(255,255,255,.96)!important;} html[data-ma-theme="light"] .branch-link, html[data-ma-theme="light"] .nav-link, html[data-ma-theme="light"] .drawer-action, html[data-ma-theme="light"] .profile-action, html[data-ma-theme="light"] button:not(.launch-card){color:var(--ma-text);} html[data-ma-theme="light"] .card-sub, html[data-ma-theme="light"] .hero-copy, html[data-ma-theme="light"] .hero-tagline, html[data-ma-theme="light"] .drawer-email, html[data-ma-theme="light"] .drawer-status, html[data-ma-theme="light"] .ma-muted{color:var(--ma-muted)!important;} body{min-height:100vh;} button,.btn,.branch-link,.nav-link,.drawer-action,.profile-action,.profile-trigger,.study-nav-btn,.launch-card{min-height:44px;} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(125,181,255,.48)!important;outline-offset:3px!important;} input,textarea,select{font-size:16px!important;} .ma-toast-wrap{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:100000;display:grid;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none;} .ma-toast{pointer-events:auto;padding:13px 15px;border-radius:18px;background:rgba(17,24,39,.96);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 60px rgba(0,0,0,.35);color:#f8fafc;font-weight:800;font-size:13px;line-height:1.35;transform:translateY(10px);opacity:0;animation:maToastIn .2s ease forwards;} html[data-ma-theme="light"] .ma-toast{background:rgba(255,255,255,.97);color:#0f172a;border-color:rgba(15,23,42,.14);} .ma-toast.ok{border-color:rgba(117,227,168,.35)}.ma-toast.warn{border-color:rgba(255,189,103,.45)}.ma-toast.err{border-color:rgba(255,107,107,.45)} @keyframes maToastIn{to{opacity:1;transform:translateY(0)}} .ma-qol-panel{margin-top:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);} .ma-qol-title{font-size:12px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;color:var(--ma-muted,#9aa6bd);margin-bottom:10px;} .ma-qol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .ma-qol-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));} .ma-qol-btn{appearance:none;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.055);color:inherit;font:inherit;font-weight:900;font-size:12px;padding:9px 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;} .ma-qol-btn.active{border-color:rgba(125,181,255,.45)!important;background:rgba(125,181,255,.16)!important;color:#ddecff!important;} html[data-ma-theme="light"] .ma-qol-btn.active{color:#123969!important;} .ma-qol-note{margin-top:10px;color:var(--ma-muted,#9aa6bd);font-size:12px;line-height:1.45;} .ma-hidden-dev-trigger{position:fixed;left:0;bottom:0;width:24px;height:24px;z-index:99999;opacity:.025;background:#fff;border:0;border-radius:0;cursor:default;} .ma-dev-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:100001;display:none;align-items:center;justify-content:center;padding:20px;} .ma-dev-backdrop.open{display:flex;} .ma-dev-modal{width:min(840px,calc(100vw - 32px));max-height:min(780px,calc(100vh - 36px));overflow:auto;border-radius:28px;background:linear-gradient(180deg,rgba(22,29,44,.98),rgba(10,14,24,.98));border:1px solid rgba(255,255,255,.14);box-shadow:0 32px 90px rgba(0,0,0,.58);padding:20px;color:#f8fafc;} html[data-ma-theme="light"] .ma-dev-modal{background:rgba(255,255,255,.98);color:#0f172a;border-color:rgba(15,23,42,.14);} .ma-dev-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;} .ma-dev-head h2{margin:0;font-size:24px;letter-spacing:-.03em;} .ma-dev-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0;} .ma-dev-table{display:grid;gap:8px;}.ma-dev-row{display:grid;grid-template-columns:minmax(130px,.42fr) 1fr;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);font-size:13px;}.ma-dev-key{font-weight:900;color:var(--ma-muted,#9aa6bd)}.ma-dev-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-word;} .ma-kana-pro-card{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.10);box-shadow:var(--ma-shadow);padding:18px;} .ma-kana-pro-head{display:flex;align-items:start;justify-content:space-between;gap:14px;margin-bottom:14px;}.ma-kana-pro-title{font-size:22px;font-weight:950;letter-spacing:-.04em;margin:0}.ma-kana-pro-sub{color:var(--ma-muted,#9aa6bd);line-height:1.5;margin-top:5px;font-size:14px}.ma-kana-pro-pills{display:flex;gap:8px;flex-wrap:wrap}.ma-kana-pill{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);padding:8px 11px;border-radius:999px;font-size:12px;font-weight:950;}.ma-kana-pill.reading{background:var(--ma-reading-soft);border-color:rgba(117,227,168,.28);color:var(--ma-reading)}.ma-kana-pill.writing{background:var(--ma-writing-soft);border-color:rgba(125,181,255,.28);color:var(--ma-writing)} .ma-kana-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 0}.ma-kana-stat{padding:14px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}.ma-kana-stat .label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ma-muted,#9aa6bd);font-weight:900}.ma-kana-stat .value{font-size:24px;font-weight:950;margin-top:8px;letter-spacing:-.03em}.ma-kana-stat .hint{font-size:12px;color:var(--ma-muted,#9aa6bd);margin-top:4px}.ma-action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.ma-action-row a,.ma-action-row button{border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit;text-decoration:none;padding:11px 14px;font-weight:950;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;}.ma-action-row .reading{background:var(--ma-reading-soft);border-color:rgba(117,227,168,.32);}.ma-action-row .writing{background:var(--ma-writing-soft);border-color:rgba(125,181,255,.32);}.ma-action-row .primary{background:linear-gradient(135deg,rgba(117,227,168,.22),rgba(125,181,255,.22));border-color:rgba(255,255,255,.18)} .ma-session-preview{margin:12px auto 16px;width:min(1120px,calc(100vw - 28px));border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);border-radius:22px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 10px 40px rgba(0,0,0,.18)}.ma-session-preview strong{font-size:14px}.ma-session-preview span{font-size:13px;color:var(--ma-muted,#9aa6bd);line-height:1.45}.ma-session-preview.reading{border-color:rgba(117,227,168,.24);}.ma-session-preview.writing{border-color:rgba(125,181,255,.24);}.ma-session-preview .ma-preview-actions{display:flex;gap:8px;flex-wrap:wrap}.ma-session-preview a{color:inherit;text-decoration:none;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 10px;font-size:12px;font-weight:900;white-space:nowrap;} .ma-result-filter-bar{margin:12px auto 16px;width:min(1120px,calc(100vw - 28px));border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);border-radius:22px;padding:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.ma-result-filter-bar button{border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:inherit;font-weight:900;font-size:12px;padding:8px 12px}.ma-result-filter-bar button.active{background:rgba(215,180,106,.18);border-color:rgba(215,180,106,.36)} @media(max-width:760px){.ma-kana-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ma-qol-grid,.ma-qol-grid.three{grid-template-columns:1fr}.ma-session-preview{align-items:flex-start;flex-direction:column}.ma-dev-row{grid-template-columns:1fr}.ma-toast-wrap{left:16px;right:16px;width:auto}.ma-kana-pro-head{flex-direction:column}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* === QOL follow-up fixes: remove redundant preview bar space, polish light mode, centre nav text === */ .ma-session-preview{display:none!important;} .branch-link,.nav-link,.study-link,.study-nav-btn,.profile-trigger,.drawer-action,.profile-action,.btn,.button,button[class*="nav"],a[class*="nav"]{ display:inline-flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; line-height:1.15!important; } .branch-links,.study-links,.nav,.study-nav-actions{align-items:center!important;} .ma-kana-plan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;} .ma-kana-plan>div{padding:14px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);} .ma-kana-plan .label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ma-muted,#9aa6bd);font-weight:900;margin-bottom:8px;} .ma-kana-plan strong{display:block;font-size:17px;font-weight:950;letter-spacing:-.03em;margin-bottom:5px;} .ma-kana-plan span{display:block;color:var(--ma-muted,#9aa6bd);font-size:12px;line-height:1.45;} html[data-ma-theme="light"] body, html[data-ma-theme="light"] .app, html[data-ma-theme="light"] .app-shell, html[data-ma-theme="light"] .shell, html[data-ma-theme="light"] main{ color:#0f172a!important; } html[data-ma-theme="light"] .topbar, 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"] header.glass, html[data-ma-theme="light"] .header, html[data-ma-theme="light"] .toolbar{ background:rgba(255,255,255,.88)!important; border-color:rgba(15,23,42,.13)!important; color:#0f172a!important; box-shadow:0 14px 40px rgba(15,23,42,.10)!important; } html[data-ma-theme="light"] .hero, html[data-ma-theme="light"] .hero.glass, html[data-ma-theme="light"] .hero-card, html[data-ma-theme="light"] .landing-hero, html[data-ma-theme="light"] .ma-kana-pro-card{ background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,246,255,.86))!important; border-color:rgba(15,23,42,.13)!important; color:#0f172a!important; } html[data-ma-theme="light"] h1, html[data-ma-theme="light"] h2, html[data-ma-theme="light"] h3, html[data-ma-theme="light"] .title, html[data-ma-theme="light"] .hero-title, html[data-ma-theme="light"] .branch-title, html[data-ma-theme="light"] .drawer-title, html[data-ma-theme="light"] .card-title, html[data-ma-theme="light"] .stat-value, html[data-ma-theme="light"] .metric-value, html[data-ma-theme="light"] .ma-kana-stat .value, html[data-ma-theme="light"] .ma-kana-pro-title{ color:#0f172a!important; } html[data-ma-theme="light"] p, 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"] .card-sub, html[data-ma-theme="light"] .ma-kana-stat .hint, html[data-ma-theme="light"] .ma-kana-pro-sub, html[data-ma-theme="light"] .ma-kana-plan span{ color:#475569!important; } html[data-ma-theme="light"] .ma-kana-stat, html[data-ma-theme="light"] .ma-kana-plan>div, html[data-ma-theme="light"] .ma-qol-panel, html[data-ma-theme="light"] .ma-result-filter-bar{ background:rgba(248,250,252,.92)!important; border-color:rgba(15,23,42,.12)!important; color:#0f172a!important; } html[data-ma-theme="light"] .branch-link, html[data-ma-theme="light"] .nav-link, html[data-ma-theme="light"] .study-link, html[data-ma-theme="light"] .study-nav-btn, html[data-ma-theme="light"] .drawer-action, html[data-ma-theme="light"] .profile-trigger, html[data-ma-theme="light"] .profile-action{ background:rgba(255,255,255,.72)!important; border-color:rgba(15,23,42,.16)!important; color:#0f172a!important; } html[data-ma-theme="light"] .branch-link.active, html[data-ma-theme="light"] .study-link.active, html[data-ma-theme="light"] .nav-link.active{ color:#0f172a!important; border-color:rgba(154,107,24,.36)!important; background:rgba(250,204,21,.20)!important; } html[data-ma-theme="light"] .branch-link.reading, html[data-ma-theme="light"] .study-link.reading, html[data-ma-theme="light"] .ma-action-row .reading{color:#0d5f3e!important;border-color:rgba(21,148,93,.30)!important;background:rgba(21,148,93,.11)!important;} html[data-ma-theme="light"] .branch-link.writing, html[data-ma-theme="light"] .study-link.writing, html[data-ma-theme="light"] .ma-action-row .writing{color:#164f9b!important;border-color:rgba(35,109,200,.30)!important;background:rgba(35,109,200,.11)!important;} @media(max-width:760px){.ma-kana-plan{grid-template-columns:1fr;}} /* === QOL continuation: final nav-handle and light-mode polish === */ .study-nav-handle, button.study-nav-handle, #studyNavShowBtn{ display:none!important; align-items:center!important; justify-content:center!important; text-align:center!important; line-height:1!important; } body.study-nav-hidden .study-nav-handle, body.study-nav-hidden button.study-nav-handle, body.study-nav-hidden #studyNavShowBtn{ display:inline-flex!important; position:fixed!important; right:18px!important; bottom:calc(28px + env(safe-area-inset-bottom,0px))!important; top:auto!important; z-index:99999!important; min-height:52px!important; padding:0 18px!important; border-radius:999px!important; border:1px solid rgba(125,181,255,.42)!important; background:rgba(12,18,30,.94)!important; color:#f8fafc!important; box-shadow:0 16px 45px rgba(0,0,0,.34),0 0 0 4px rgba(125,181,255,.16)!important; } .branch-link,.nav-link,.study-link,.study-nav-btn,.profile-trigger,.drawer-action,.profile-action,.ma-qol-btn,.ma-action-row a,.ma-action-row button,.button,.btn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; line-height:1.12!important; min-height:44px!important; } html[data-ma-theme="light"]{ --bg-1:#f6f8fc!important; --bg-2:#eef3fa!important; --panel:#ffffff!important; --panel-2:#f8fafc!important; --card:#ffffff!important; --text:#0b1220!important; --muted:#4b5568!important; --soft:#334155!important; --line:rgba(15,23,42,.13)!important; --shadow:0 20px 60px rgba(15,23,42,.12)!important; } html[data-ma-theme="light"] body{ background:radial-gradient(circle at 15% 5%,rgba(125,181,255,.26),transparent 25%),radial-gradient(circle at 82% 2%,rgba(181,150,255,.20),transparent 24%),linear-gradient(180deg,#fbfdff 0%,#eef3f9 100%)!important; color:#0b1220!important; } html[data-ma-theme="light"] body::before{opacity:.16!important;filter:none!important;} html[data-ma-theme="light"] body::after{color:rgba(15,23,42,.035)!important;opacity:.34!important;} html[data-ma-theme="light"] .hero, html[data-ma-theme="light"] .landing-hero, html[data-ma-theme="light"] .hero-card, html[data-ma-theme="light"] .card, html[data-ma-theme="light"] .panel, html[data-ma-theme="light"] .panel-inner, html[data-ma-theme="light"] .atlas-card, html[data-ma-theme="light"] .suite-card, html[data-ma-theme="light"] .branch-card, html[data-ma-theme="light"] .about-card, html[data-ma-theme="light"] .about-point, html[data-ma-theme="light"] .stat, html[data-ma-theme="light"] .metric, html[data-ma-theme="light"] .score-pill, html[data-ma-theme="light"] .main, html[data-ma-theme="light"] .side-panel, html[data-ma-theme="light"] .menu-section, html[data-ma-theme="light"] .modal, html[data-ma-theme="light"] .modal-card, html[data-ma-theme="light"] .drawer-user, 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-pro-feature-card, html[data-ma-theme="light"] .ma-result-insights{ background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,249,254,.90))!important; border-color:rgba(15,23,42,.13)!important; color:#0b1220!important; box-shadow:0 20px 55px rgba(15,23,42,.11)!important; } html[data-ma-theme="light"] .topbar, 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"] header, html[data-ma-theme="light"] .toolbar{ background:rgba(255,255,255,.92)!important; border-color:rgba(15,23,42,.14)!important; color:#0b1220!important; box-shadow:0 14px 40px rgba(15,23,42,.09)!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"] .brand-name, html[data-ma-theme="light"] .branch-name, html[data-ma-theme="light"] .branch-title, html[data-ma-theme="light"] .main-title, html[data-ma-theme="light"] .hero-title, html[data-ma-theme="light"] .launch-title, html[data-ma-theme="light"] .card-title, html[data-ma-theme="light"] .drawer-title, html[data-ma-theme="light"] .study-title, html[data-ma-theme="light"] .ma-kana-pro-title, html[data-ma-theme="light"] .value, html[data-ma-theme="light"] .stat-value, html[data-ma-theme="light"] .metric-value, html[data-ma-theme="light"] strong{ color:#0b1220!important; text-shadow:none!important; } html[data-ma-theme="light"] p, html[data-ma-theme="light"] .subline, 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-kicker, html[data-ma-theme="light"] .brand-sub, html[data-ma-theme="light"] .study-platform, html[data-ma-theme="light"] .drawer-email, html[data-ma-theme="light"] .drawer-status, html[data-ma-theme="light"] .ma-qol-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-kana-plan span, html[data-ma-theme="light"] .about-point span, html[data-ma-theme="light"] .footer, html[data-ma-theme="light"] .footer strong{ color:#475569!important; text-shadow:none!important; } html[data-ma-theme="light"] .branch-link, html[data-ma-theme="light"] .nav-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"] .drawer-action, html[data-ma-theme="light"] .profile-action, html[data-ma-theme="light"] .ma-qol-btn, html[data-ma-theme="light"] .button:not(.primary), html[data-ma-theme="light"] .btn{ background:rgba(255,255,255,.86)!important; border-color:rgba(15,23,42,.16)!important; color:#0b1220!important; box-shadow:0 8px 24px rgba(15,23,42,.07)!important; } html[data-ma-theme="light"] .branch-link:hover, html[data-ma-theme="light"] .nav-link:hover, html[data-ma-theme="light"] .study-link:hover, html[data-ma-theme="light"] .study-nav-btn:hover, html[data-ma-theme="light"] .drawer-action:hover, html[data-ma-theme="light"] .profile-action:hover{ background:#ffffff!important; border-color:rgba(15,23,42,.24)!important; color:#0b1220!important; } html[data-ma-theme="light"] .branch-link.active, html[data-ma-theme="light"] .nav-link.active, html[data-ma-theme="light"] .study-link.active, html[data-ma-theme="light"] .ma-qol-btn.active{ background:rgba(250,204,21,.22)!important; border-color:rgba(161,98,7,.35)!important; color:#111827!important; box-shadow:0 0 0 3px rgba(250,204,21,.13)!important; } html[data-ma-theme="light"] .study-link.reading, html[data-ma-theme="light"] .branch-link.reading, html[data-ma-theme="light"] .ma-kana-pill.reading, html[data-ma-theme="light"] .ma-action-row .reading{ background:rgba(21,148,93,.12)!important; border-color:rgba(21,148,93,.30)!important; color:#075e3d!important; } html[data-ma-theme="light"] .study-link.writing, html[data-ma-theme="light"] .branch-link.writing, html[data-ma-theme="light"] .ma-kana-pill.writing, html[data-ma-theme="light"] .ma-action-row .writing{ background:rgba(35,109,200,.12)!important; border-color:rgba(35,109,200,.30)!important; color:#164f9b!important; } html[data-ma-theme="light"] .button.primary, html[data-ma-theme="light"] .primary, html[data-ma-theme="light"] .launch-card:not(.disabled){ color:#07111f!important; } html[data-ma-theme="light"] input, html[data-ma-theme="light"] textarea, html[data-ma-theme="light"] select{ background:#ffffff!important; border-color:rgba(15,23,42,.18)!important; color:#0b1220!important; } html[data-ma-theme="light"] input::placeholder, html[data-ma-theme="light"] textarea::placeholder{color:#64748b!important;} html[data-ma-theme="light"] .daily-badge, html[data-ma-theme="light"] .pill, html[data-ma-theme="light"] .ma-sync-pill{ background:rgba(255,255,255,.86)!important; border-color:rgba(15,23,42,.14)!important; color:#0b1220!important; } html[data-ma-theme="light"] .ma-loading-screen{background:rgba(248,250,252,.92)!important;} html[data-ma-theme="light"] .ma-loading-card{background:#ffffff!important;color:#0b1220!important;border-color:rgba(15,23,42,.13)!important;} .ma-pro-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px;} .ma-pro-feature-card{padding:14px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);} .ma-pro-feature-card .label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ma-muted,#9aa6bd);font-weight:950;margin-bottom:8px;} .ma-pro-feature-card strong{display:block;font-size:17px;font-weight:950;letter-spacing:-.03em;margin-bottom:5px;} .ma-pro-feature-card span{display:block;color:var(--ma-muted,#9aa6bd);font-size:12px;line-height:1.45;} .ma-path-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:12px;} .ma-path-step{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);border-radius:16px;padding:10px;min-height:76px;display:grid;align-content:space-between;} .ma-path-step b{font-size:13px;}.ma-path-step small{color:var(--ma-muted,#9aa6bd);font-weight:800;}.ma-path-step.done{border-color:rgba(117,227,168,.32);background:var(--ma-reading-soft);}.ma-path-step.next{border-color:rgba(125,181,255,.34);background:var(--ma-writing-soft);} .ma-result-insights{margin:12px auto 16px;width:min(1120px,calc(100vw - 28px));border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);border-radius:22px;padding:14px;display:grid;gap:8px;} .ma-result-insights h3{margin:0;font-size:18px;}.ma-result-insights p{margin:0;color:var(--ma-muted,#9aa6bd);line-height:1.45;} @media(max-width:860px){.ma-pro-feature-grid{grid-template-columns:1fr}.ma-path-track{grid-template-columns:repeat(2,minmax(0,1fr));}} /* === Professional QOL patch: stronger light mode, preset checklist, compact results === */ .ma-ui-icon{display:inline-flex;align-items:center;justify-content:center;width:1.1em;min-width:1.1em;margin-right:.42em;font-weight:950;line-height:1;opacity:.9} .ma-preset-menu{padding:14px;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075)} .ma-preset-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.ma-preset-btn{min-height:58px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055);color:inherit;text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;font-weight:950;cursor:pointer}.ma-preset-btn small{font-size:11px;color:var(--ma-muted,#9aa6bd);font-weight:800;line-height:1.25}.ma-preset-btn:hover{transform:translateY(-1px);border-color:rgba(117,227,168,.35)} .ma-confusable-notice{width:min(1080px,calc(100vw - 24px));margin:10px auto 0;padding:10px 12px;border:1px solid rgba(215,180,106,.28);background:rgba(215,180,106,.09);border-radius:16px;color:inherit;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}.ma-confusable-notice b{white-space:nowrap}.ma-confusable-notice span{color:var(--ma-muted,#9aa6bd)}.ma-confusable-notice button{border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit;font-weight:900;padding:7px 10px} .ma-preset-track-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}.ma-preset-track{display:flex;flex-direction:column;gap:9px;padding:15px;border-radius:22px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03));color:inherit;text-decoration:none}.ma-preset-track.done{border-color:rgba(117,227,168,.34);background:var(--ma-reading-soft)}.ma-preset-track-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.ma-preset-track-top strong{font-size:17px;font-weight:950}.ma-preset-track-top span{font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:var(--ma-muted,#9aa6bd)}.ma-preset-track p{margin:0;color:var(--ma-muted,#9aa6bd);font-size:13px;line-height:1.35}.ma-preset-track small{font-weight:900;color:var(--ma-muted,#9aa6bd)}.ma-progress{height:9px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.08)}.ma-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ma-reading,#75e3a8),var(--ma-writing,#7db5ff))} .ma-compact-insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.ma-compact-insight-grid>div{padding:13px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.ma-compact-insight-grid b{display:block;font-size:13px;margin-bottom:6px}.ma-compact-insight-grid span{display:block;color:var(--ma-muted,#9aa6bd);font-size:12px;line-height:1.4} .ma-compact-results{width:min(1120px,calc(100vw - 28px));margin:12px auto 16px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.ma-mini-result-card{min-height:96px;padding:14px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);display:flex;flex-direction:column;justify-content:space-between}.ma-mini-result-card b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ma-muted,#9aa6bd)}.ma-mini-result-card strong{font-size:26px;font-weight:950;letter-spacing:-.04em}.ma-mini-result-card span{font-size:12px;color:var(--ma-muted,#9aa6bd)} #maResultInsights{display:none!important}.ma-path-track,.ma-pro-feature-grid{display:none!important}#maKanaProFeatures{display:none!important} html[data-ma-theme="light"] body{background:linear-gradient(180deg,#f8fbff 0%,#edf3fb 100%)!important;color:#0b1220!important}html[data-ma-theme="light"] body::before{opacity:.08!important}html[data-ma-theme="light"] body::after{opacity:.08!important;color:rgba(15,23,42,.04)!important} html[data-ma-theme="light"] .glass, html[data-ma-theme="light"] .card, html[data-ma-theme="light"] .panel, html[data-ma-theme="light"] .stat-card, html[data-ma-theme="light"] .metric-card, html[data-ma-theme="light"] .result-card, html[data-ma-theme="light"] .result-row, html[data-ma-theme="light"] .score-card, html[data-ma-theme="light"] .drawer-panel, html[data-ma-theme="light"] .profile-drawer, html[data-ma-theme="light"] .modal, html[data-ma-theme="light"] .modal-content, html[data-ma-theme="light"] .bottom-shell, html[data-ma-theme="light"] .drawer-content, html[data-ma-theme="light"] .options-stack>div, html[data-ma-theme="light"] .ma-preset-menu, html[data-ma-theme="light"] .ma-preset-track, html[data-ma-theme="light"] .ma-compact-insight-grid>div, html[data-ma-theme="light"] .ma-mini-result-card, html[data-ma-theme="light"] .ma-confusable-notice, html[data-ma-theme="light"] .ma-pro-feature-card, html[data-ma-theme="light"] .ma-path-step{ background:#ffffff!important;border-color:rgba(15,23,42,.13)!important;color:#0b1220!important;box-shadow:0 16px 45px rgba(15,23,42,.08)!important;text-shadow:none!important; } html[data-ma-theme="light"] .hero, html[data-ma-theme="light"] .landing-hero, html[data-ma-theme="light"] .ma-kana-pro-card, html[data-ma-theme="light"] #maPresetChecklist{ background:linear-gradient(135deg,#ffffff 0%,#f2f7ff 100%)!important;border-color:rgba(15,23,42,.13)!important;color:#0b1220!important;box-shadow:0 18px 55px rgba(15,23,42,.10)!important; } html[data-ma-theme="light"] .launch-card, html[data-ma-theme="light"] .mode-card, html[data-ma-theme="light"] .practice-card{ color:#0b1220!important;border-color:rgba(15,23,42,.14)!important;text-shadow:none!important; } html[data-ma-theme="light"] .launch-card.reading, html[data-ma-theme="light"] .mode-card.reading, html[data-ma-theme="light"] .practice-card.reading{background:linear-gradient(135deg,rgba(21,148,93,.16),rgba(255,255,255,.92))!important;color:#062f20!important} html[data-ma-theme="light"] .launch-card.writing, html[data-ma-theme="light"] .mode-card.writing, html[data-ma-theme="light"] .practice-card.writing{background:linear-gradient(135deg,rgba(35,109,200,.16),rgba(255,255,255,.92))!important;color:#0b2850!important} html[data-ma-theme="light"] .test-results-link, html[data-ma-theme="light"] a[href*="test"], html[data-ma-theme="light"] a[href*="result"]{background:#ffffff!important;color:#0b1220!important;border-color:rgba(15,23,42,.16)!important;text-shadow:none!important;box-shadow:0 10px 30px rgba(15,23,42,.08)!important} html[data-ma-theme="light"] .section-title, html[data-ma-theme="light"] .label, html[data-ma-theme="light"] .kicker, html[data-ma-theme="light"] .eyebrow, html[data-ma-theme="light"] .ma-mini-result-card b, html[data-ma-theme="light"] .ma-compact-insight-grid b, html[data-ma-theme="light"] .ma-preset-track-top span{color:#334155!important;text-shadow:none!important} html[data-ma-theme="light"] .ma-preset-btn, html[data-ma-theme="light"] .toggle-btn, html[data-ma-theme="light"] .tab-button, html[data-ma-theme="light"] .ma-result-filter-bar button{background:#ffffff!important;border-color:rgba(15,23,42,.15)!important;color:#0b1220!important;box-shadow:0 8px 22px rgba(15,23,42,.06)!important;text-shadow:none!important} html[data-ma-theme="light"] .toggle-btn.active, html[data-ma-theme="light"] .btn.active, html[data-ma-theme="light"] .ma-preset-track.done{background:rgba(21,148,93,.12)!important;border-color:rgba(21,148,93,.34)!important;color:#064e3b!important} html[data-ma-theme="light"] .ma-progress{background:rgba(15,23,42,.08)!important;border-color:rgba(15,23,42,.08)!important} html[data-ma-theme="light"] .ma-save-grid .danger{color:#991b1b!important;background:rgba(239,68,68,.09)!important;border-color:rgba(185,28,28,.28)!important} html[data-ma-theme="light"] .ma-sync-pill.ok, html[data-ma-theme="light"] .ma-sync-pill.cloud{color:#065f46!important;background:rgba(16,185,129,.12)!important;border-color:rgba(16,185,129,.28)!important} html[data-ma-theme="light"] .ma-sync-pill.warning, html[data-ma-theme="light"] .ma-sync-pill.offline{color:#92400e!important;background:rgba(245,158,11,.13)!important;border-color:rgba(245,158,11,.32)!important} html[data-ma-theme="light"] .ma-sync-pill.local, html[data-ma-theme="light"] .ma-sync-pill.neutral{color:#1d4ed8!important;background:rgba(59,130,246,.11)!important;border-color:rgba(59,130,246,.30)!important} html[data-ma-theme="light"] .ma-preset-btn small, html[data-ma-theme="light"] .ma-confusable-notice span, html[data-ma-theme="light"] .ma-preset-track p, html[data-ma-theme="light"] .ma-preset-track small, html[data-ma-theme="light"] .ma-compact-insight-grid span, html[data-ma-theme="light"] .ma-mini-result-card span{color:#475569!important;text-shadow:none!important} @media(max-width:980px){.ma-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ma-preset-track-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ma-compact-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ma-compact-results{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.ma-preset-grid,.ma-preset-track-grid,.ma-compact-insight-grid,.ma-compact-results{grid-template-columns:1fr}.ma-confusable-notice{align-items:flex-start;flex-direction:column}} /* === QOL cleanup pass: less clutter, stronger light mode, speed/mastery structure === */ .ma-ui-icon{display:none!important;} .ma-speed-mastery{margin-top:18px;} .ma-speed-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px;} .ma-speed-card{padding:16px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);min-height:116px;display:flex;flex-direction:column;justify-content:space-between;} .ma-speed-card .label{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--ma-muted);font-weight:950;} .ma-speed-card strong{display:block;font-size:28px;line-height:1.05;letter-spacing:-.04em;} .ma-speed-card small{color:var(--ma-muted);font-size:12px;font-weight:750;line-height:1.35;} .ma-mastery-breakdown{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px;} .ma-mastery-breakdown>div{padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);} .ma-mastery-breakdown b{display:block;margin-bottom:6px;font-size:13px;} .ma-mastery-breakdown span{display:block;color:var(--ma-muted);font-size:12px;line-height:1.45;} .ma-compact-results{align-items:stretch;} .ma-mini-result-card{min-height:108px;} .ma-mini-result-card b{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--ma-muted);} html[data-ma-theme="light"]{--ma-app-bg:#eef3f9;--ma-app-bg-soft:#f8fafc;--ma-card:#ffffff;--ma-card-2:#f3f6fb;--ma-text:#07111f;--ma-muted:#4b5568;--ma-border:rgba(12,20,36,.14);--ma-border-strong:rgba(12,20,36,.24);} html[data-ma-theme="light"] body{background:linear-gradient(180deg,#f8fbff 0%,#edf3fa 52%,#e8eff7 100%)!important;color:#07111f!important;} 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"] .topbar{background:rgba(255,255,255,.96)!important;border-color:rgba(12,20,36,.14)!important;box-shadow:0 14px 34px rgba(15,23,42,.10)!important;} html[data-ma-theme="light"] .hero, html[data-ma-theme="light"] .hero-card, html[data-ma-theme="light"] .glass, html[data-ma-theme="light"] .card, html[data-ma-theme="light"] .gauge-card, html[data-ma-theme="light"] .pulse-key-card, html[data-ma-theme="light"] .timeline-card, html[data-ma-theme="light"] .mega-inline-card, html[data-ma-theme="light"] .row-performance-section, html[data-ma-theme="light"] .row-doughnut-card, html[data-ma-theme="light"] .test-tile, html[data-ma-theme="light"] .modal-card, html[data-ma-theme="light"] .profile-drawer, html[data-ma-theme="light"] #profileDrawer, html[data-ma-theme="light"] .ma-kana-pro-card, html[data-ma-theme="light"] .ma-speed-card, html[data-ma-theme="light"] .ma-mastery-breakdown>div, html[data-ma-theme="light"] .ma-preset-track, html[data-ma-theme="light"] .ma-mini-result-card, html[data-ma-theme="light"] .ma-result-filter-bar{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)!important;border-color:rgba(12,20,36,.14)!important;color:#07111f!important;box-shadow:0 18px 45px rgba(15,23,42,.08)!important;} html[data-ma-theme="light"] .launch-card{background:#ffffff!important;border:1px solid rgba(12,20,36,.16)!important;box-shadow:0 16px 36px rgba(15,23,42,.10)!important;color:#07111f!important;} html[data-ma-theme="light"] .launch-card.reading{background:linear-gradient(135deg,rgba(21,148,93,.15),#ffffff 72%)!important;border-color:rgba(21,148,93,.24)!important;} html[data-ma-theme="light"] .launch-card.writing{background:linear-gradient(135deg,rgba(35,109,200,.15),#ffffff 72%)!important;border-color:rgba(35,109,200,.24)!important;} html[data-ma-theme="light"] .launch-card .launch-title, html[data-ma-theme="light"] .launch-card .launch-foot, html[data-ma-theme="light"] .launch-card .launch-arrow, html[data-ma-theme="light"] .launch-card .launch-badge{color:#07111f!important;text-shadow:none!important;opacity:1!important;} html[data-ma-theme="light"] .launch-card .launch-sub, html[data-ma-theme="light"] .launch-card .launch-kicker{color:#435169!important;text-shadow:none!important;opacity:1!important;} html[data-ma-theme="light"] .launch-card .launch-badge{background:rgba(255,255,255,.72)!important;border-color:rgba(12,20,36,.13)!important;} 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"] .nav-link, html[data-ma-theme="light"] .profile-trigger, html[data-ma-theme="light"] .ma-qol-btn, html[data-ma-theme="light"] .ma-result-filter-bar button{background:#ffffff!important;border-color:rgba(12,20,36,.16)!important;color:#07111f!important;box-shadow:0 8px 20px rgba(15,23,42,.07)!important;} html[data-ma-theme="light"] .branch-link.results, html[data-ma-theme="light"] .results-link, html[data-ma-theme="light"] a[href*="test.html"]{background:#ffffff!important;color:#07111f!important;border-color:rgba(12,20,36,.16)!important;} html[data-ma-theme="light"] .ma-result-filter-bar button.active{background:rgba(218,165,32,.18)!important;border-color:rgba(154,107,24,.35)!important;color:#07111f!important;} html[data-ma-theme="light"] .branch-link.reading, html[data-ma-theme="light"] .study-link.reading{background:rgba(21,148,93,.12)!important;color:#075e3d!important;border-color:rgba(21,148,93,.32)!important;} html[data-ma-theme="light"] .branch-link.writing, html[data-ma-theme="light"] .study-link.writing{background:rgba(35,109,200,.12)!important;color:#164f9b!important;border-color:rgba(35,109,200,.32)!important;} html[data-ma-theme="light"] h1, html[data-ma-theme="light"] h2, html[data-ma-theme="light"] h3, html[data-ma-theme="light"] .hero-title, html[data-ma-theme="light"] .main-title, html[data-ma-theme="light"] .study-title, html[data-ma-theme="light"] .card-title, html[data-ma-theme="light"] .ma-kana-pro-title, html[data-ma-theme="light"] .value, html[data-ma-theme="light"] .stat-value, html[data-ma-theme="light"] .metric-value, html[data-ma-theme="light"] .test-title, html[data-ma-theme="light"] strong{color:#07111f!important;text-shadow:none!important;} html[data-ma-theme="light"] p, 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"] .test-sub, html[data-ma-theme="light"] .subtext, html[data-ma-theme="light"] .muted, html[data-ma-theme="light"] .ma-kana-pro-sub, html[data-ma-theme="light"] .ma-speed-card small, html[data-ma-theme="light"] .ma-mastery-breakdown span, html[data-ma-theme="light"] .ma-mini-result-card span, html[data-ma-theme="light"] .ma-qol-note{color:#46546b!important;text-shadow:none!important;opacity:1!important;} html[data-ma-theme="light"] .ma-speed-card .label, html[data-ma-theme="light"] .ma-mini-result-card b, html[data-ma-theme="light"] .ma-kana-stat .label{color:#36445b!important;} html[data-ma-theme="light"] .stats-panel, html[data-ma-theme="light"] .stats-panel .panel-head, html[data-ma-theme="light"] .stats-panel header, html[data-ma-theme="light"] .panel-head{background:linear-gradient(180deg,#ffffff,#edf2f8)!important;color:#07111f!important;border-color:rgba(12,20,36,.14)!important;} html[data-ma-theme="light"] .stats-panel button, html[data-ma-theme="light"] .stats-panel .toggle{color:#07111f!important;} html[data-ma-theme="light"] .profile-trigger .avatar, html[data-ma-theme="light"] .avatar{color:#07111f!important;} @media(max-width:980px){.ma-speed-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ma-mastery-breakdown{grid-template-columns:1fr}} @media(max-width:620px){.ma-speed-grid,.ma-preset-track-grid,.ma-compact-results{grid-template-columns:1fr!important;}} /* === Light mode + preset/mode cleanup pass === */ .ma-mode-title{margin-top:18px!important;} .ma-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px;} .ma-mode-btn{min-height:84px;} .ma-preset-btn{cursor:pointer;text-align:left;appearance:none;-webkit-appearance:none;} .ma-preset-btn.active{border-color:rgba(120,180,255,.75)!important;background:linear-gradient(135deg,rgba(77,139,255,.22),rgba(255,255,255,.06))!important;box-shadow:0 0 0 3px rgba(77,139,255,.18),0 18px 45px rgba(0,0,0,.20)!important;} .ma-practice-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;} .ma-action-card{display:block;text-decoration:none;padding:16px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:var(--ma-text);} .ma-action-card strong{display:block;font-size:16px;margin-bottom:6px;} .ma-action-card span{display:block;color:var(--ma-muted);font-size:13px;line-height:1.45;} .ma-action-card.reading{border-color:rgba(113,232,166,.24);background:rgba(113,232,166,.08);} .ma-action-card.confusable{border-color:rgba(96,165,250,.24);background:rgba(96,165,250,.08);} html[data-ma-theme="light"]{--ma-app-bg:#eef4fb;--ma-app-bg-soft:#f9fbff;--ma-card:#ffffff;--ma-card-2:#f6f9fe;--ma-text:#07111f;--ma-muted:#3f4d63;--ma-border:rgba(15,23,42,.16);--ma-border-strong:rgba(15,23,42,.25);} html[data-ma-theme="light"] body{background:#edf3fa!important;color:#07111f!important;} html[data-ma-theme="light"] .branch,html[data-ma-theme="light"] .future-card,html[data-ma-theme="light"] .about-card,html[data-ma-theme="light"] .about-point,html[data-ma-theme="light"] .hero,html[data-ma-theme="light"] .hero.glass,html[data-ma-theme="light"] .hero-panel,html[data-ma-theme="light"] .ma-kana-pro-card,html[data-ma-theme="light"] .ma-speed-card,html[data-ma-theme="light"] .ma-mastery-breakdown>div,html[data-ma-theme="light"] .ma-preset-track,html[data-ma-theme="light"] .ma-action-card,html[data-ma-theme="light"] .ma-mini-result-card,html[data-ma-theme="light"] .ma-result-filter-bar,html[data-ma-theme="light"] .stats-panel,html[data-ma-theme="light"] .scoreboard,html[data-ma-theme="light"] .scores-panel,html[data-ma-theme="light"] .bottom-shell,html[data-ma-theme="light"] .modifier-panel,html[data-ma-theme="light"] .panel,html[data-ma-theme="light"] .card{background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%)!important;color:#07111f!important;border-color:rgba(15,23,42,.16)!important;box-shadow:0 18px 44px rgba(15,23,42,.09)!important;} html[data-ma-theme="light"] .branch.kana{background:linear-gradient(135deg,#ffffff 0%,#eef8f3 55%,#f8fbff 100%)!important;} html[data-ma-theme="light"] .branch.words{background:linear-gradient(135deg,#ffffff 0%,#fff5f9 55%,#f8fbff 100%)!important;} html[data-ma-theme="light"] .branch.future{background:linear-gradient(180deg,#f6f9fe 0%,#eef4fb 100%)!important;opacity:1!important;} html[data-ma-theme="light"] .branch-label,html[data-ma-theme="light"] .branch-chip,html[data-ma-theme="light"] .branch-title,html[data-ma-theme="light"] .branch-bottom,html[data-ma-theme="light"] .future-title,html[data-ma-theme="light"] .future-label,html[data-ma-theme="light"] .section-kicker,html[data-ma-theme="light"] .section-title,html[data-ma-theme="light"] .about-point strong,html[data-ma-theme="light"] .brand-name,html[data-ma-theme="light"] .branch-name,html[data-ma-theme="light"] .study-title{color:#07111f!important;text-shadow:none!important;opacity:1!important;} html[data-ma-theme="light"] .branch-copy,html[data-ma-theme="light"] .section-note,html[data-ma-theme="light"] .future-copy,html[data-ma-theme="light"] .about-card p,html[data-ma-theme="light"] .about-point span,html[data-ma-theme="light"] .hero-copy,html[data-ma-theme="light"] .hero-line,html[data-ma-theme="light"] .ma-kana-pro-sub,html[data-ma-theme="light"] .ma-speed-card small,html[data-ma-theme="light"] .ma-mastery-breakdown span,html[data-ma-theme="light"] .ma-action-card span,html[data-ma-theme="light"] .ma-preset-btn small{color:#3f4d63!important;text-shadow:none!important;opacity:1!important;} 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{background:rgba(255,255,255,.82)!important;border-color:rgba(15,23,42,.15)!important;color:#07111f!important;} html[data-ma-theme="light"] .branch-bottom{border-top-color:rgba(15,23,42,.12)!important;} html[data-ma-theme="light"] .branch-arrow{background:rgba(15,23,42,.06)!important;border-color:rgba(15,23,42,.12)!important;color:#07111f!important;} html[data-ma-theme="light"] .launch-card.reading{background:linear-gradient(135deg,#e9f8f0 0%,#ffffff 78%)!important;} html[data-ma-theme="light"] .launch-card.writing{background:linear-gradient(135deg,#eaf3ff 0%,#ffffff 78%)!important;} html[data-ma-theme="light"] .launch-card .launch-sub,html[data-ma-theme="light"] .launch-card .launch-kicker,html[data-ma-theme="light"] .launch-card .launch-foot{color:#334155!important;opacity:1!important;} html[data-ma-theme="light"] .ma-preset-btn.active{background:linear-gradient(135deg,rgba(59,130,246,.18),#ffffff)!important;color:#07111f!important;border-color:rgba(37,99,235,.48)!important;} html[data-ma-theme="light"] .ma-action-card.reading{background:linear-gradient(135deg,rgba(16,185,129,.13),#ffffff)!important;border-color:rgba(5,150,105,.28)!important;} html[data-ma-theme="light"] .ma-action-card.confusable{background:linear-gradient(135deg,rgba(59,130,246,.13),#ffffff)!important;border-color:rgba(37,99,235,.28)!important;} html[data-ma-theme="light"] .stats-panel header,html[data-ma-theme="light"] .stats-panel .panel-head{background:linear-gradient(180deg,#ffffff,#edf4fb)!important;color:#07111f!important;} html[data-ma-theme="light"] .cell{color:#07111f!important;text-shadow:none!important;} @media(max-width:980px){.ma-practice-actions,.ma-mode-grid{grid-template-columns:1fr;}} /* === Preset sizing, confusable mode placement, and stronger light-mode polish === */ .ma-preset-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;} .ma-preset-btn{min-height:92px!important;padding:18px 20px!important;border-radius:22px!important;gap:8px!important;align-items:flex-start!important;justify-content:center!important;} .ma-preset-btn span{font-size:20px!important;line-height:1.05!important;font-weight:950!important;} .ma-preset-btn small{font-size:13px!important;line-height:1.25!important;} .ma-mode-title,.ma-mode-grid{display:none!important;} .ma-confusable-toggle{position:relative;} .ma-confusable-toggle::after{content:'シ/ツ';font-size:10px;font-weight:950;margin-left:7px;opacity:.62;letter-spacing:.02em;} .ma-qol-theme-btn.active,[data-ma-theme-choice].active{border-color:rgba(125,181,255,.75)!important;background:linear-gradient(135deg,rgba(125,181,255,.28),rgba(255,255,255,.08))!important;box-shadow:0 0 0 3px rgba(125,181,255,.20)!important;} html[data-ma-theme="light"] .ma-qol-theme-btn.active,html[data-ma-theme="light"] [data-ma-theme-choice].active{background:linear-gradient(135deg,#dbeafe,#ffffff)!important;color:#0f3d75!important;border-color:rgba(37,99,235,.55)!important;box-shadow:0 0 0 3px rgba(37,99,235,.14)!important;} html[data-ma-theme="light"] body,html[data-ma-theme="light"] .app-shell,html[data-ma-theme="light"] .page-shell,html[data-ma-theme="light"] main{background:linear-gradient(180deg,#f7fbff 0%,#eaf1f8 100%)!important;color:#07111f!important;} html[data-ma-theme="light"] .topbar,html[data-ma-theme="light"] .study-topbar,html[data-ma-theme="light"] .site-header,html[data-ma-theme="light"] nav,html[data-ma-theme="light"] .bottom-shell,html[data-ma-theme="light"] .drawer-content,html[data-ma-theme="light"] .profile-drawer,html[data-ma-theme="light"] #profileDrawer,html[data-ma-theme="light"] .drawer-panel,html[data-ma-theme="light"] .modal,html[data-ma-theme="light"] .popup,html[data-ma-theme="light"] .import-modal{background:rgba(255,255,255,.92)!important;color:#07111f!important;border-color:rgba(15,23,42,.16)!important;box-shadow:0 20px 55px rgba(15,23,42,.12)!important;} html[data-ma-theme="light"] .hero,html[data-ma-theme="light"] .hero.glass,html[data-ma-theme="light"] .hero-panel,html[data-ma-theme="light"] .branch,html[data-ma-theme="light"] .future-card,html[data-ma-theme="light"] .launch-card,html[data-ma-theme="light"] .ma-kana-pro-card,html[data-ma-theme="light"] .ma-speed-card,html[data-ma-theme="light"] .ma-mini-result-card,html[data-ma-theme="light"] .ma-result-filter-bar,html[data-ma-theme="light"] .stats-panel,html[data-ma-theme="light"] .scoreboard,html[data-ma-theme="light"] .scores-panel,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"] .panel,html[data-ma-theme="light"] .card,html[data-ma-theme="light"] .stat-card,html[data-ma-theme="light"] .result-card{background:linear-gradient(180deg,#ffffff 0%,#f3f7fc 100%)!important;color:#07111f!important;border-color:rgba(15,23,42,.16)!important;box-shadow:0 18px 44px rgba(15,23,42,.10)!important;} html[data-ma-theme="light"] .branch.kana,html[data-ma-theme="light"] .launch-card.reading{background:linear-gradient(135deg,#ffffff 0%,#e6f8ef 100%)!important;color:#07111f!important;} html[data-ma-theme="light"] .launch-card.writing{background:linear-gradient(135deg,#ffffff 0%,#e8f2ff 100%)!important;color:#07111f!important;} html[data-ma-theme="light"] .branch.words{background:linear-gradient(135deg,#ffffff 0%,#fff0f6 100%)!important;color:#07111f!important;} html[data-ma-theme="light"] .branch.future,html[data-ma-theme="light"] .future-card{background:linear-gradient(180deg,#f9fbff 0%,#edf3fa 100%)!important;color:#07111f!important;opacity:1!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"] .brand-name,html[data-ma-theme="light"] .study-title,html[data-ma-theme="light"] .branch-title,html[data-ma-theme="light"] .branch-name,html[data-ma-theme="light"] .future-title,html[data-ma-theme="light"] .launch-title,html[data-ma-theme="light"] .launch-card strong,html[data-ma-theme="light"] .ma-kana-pro-title,html[data-ma-theme="light"] .ma-speed-card strong,html[data-ma-theme="light"] .ma-mini-result-card strong,html[data-ma-theme="light"] .drawer-title,html[data-ma-theme="light"] .section-title{color:#07111f!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"] span,html[data-ma-theme="light"] .muted,html[data-ma-theme="light"] .subtitle,html[data-ma-theme="light"] .branch-copy,html[data-ma-theme="light"] .future-copy,html[data-ma-theme="light"] .hero-copy,html[data-ma-theme="light"] .hero-line,html[data-ma-theme="light"] .launch-sub,html[data-ma-theme="light"] .launch-kicker,html[data-ma-theme="light"] .launch-foot,html[data-ma-theme="light"] .ma-kana-pro-sub,html[data-ma-theme="light"] .ma-speed-card small,html[data-ma-theme="light"] .ma-mini-result-card span,html[data-ma-theme="light"] .section-note,html[data-ma-theme="light"] .profile-status,html[data-ma-theme="light"] .ma-qol-note{color:#334155!important;text-shadow:none!important;opacity:1!important;} html[data-ma-theme="light"] .nav-link,html[data-ma-theme="light"] .branch-link,html[data-ma-theme="light"] .profile-trigger,html[data-ma-theme="light"] .drawer-close,html[data-ma-theme="light"] .btn,html[data-ma-theme="light"] .profile-action,html[data-ma-theme="light"] .drawer-action,html[data-ma-theme="light"] .tab-button,html[data-ma-theme="light"] .toggle-btn,html[data-ma-theme="light"] .ma-preset-btn,html[data-ma-theme="light"] button{color:#07111f!important;background:#ffffff!important;border-color:rgba(15,23,42,.18)!important;text-shadow:none!important;} html[data-ma-theme="light"] .toggle-btn.active,html[data-ma-theme="light"] .btn.active,html[data-ma-theme="light"] .tab-button.active{background:linear-gradient(135deg,rgba(16,185,129,.16),#ffffff)!important;border-color:rgba(5,150,105,.42)!important;color:#064e3b!important;box-shadow:0 0 0 3px rgba(5,150,105,.10)!important;} html[data-ma-theme="light"] body.writing-mode .toggle-btn.active,html[data-ma-theme="light"] body.writing-mode .btn.active{background:linear-gradient(135deg,rgba(59,130,246,.16),#ffffff)!important;border-color:rgba(37,99,235,.42)!important;color:#0f3d75!important;} html[data-ma-theme="light"] .branch-bottom,html[data-ma-theme="light"] .branch-chip,html[data-ma-theme="light"] .launch-badge,html[data-ma-theme="light"] .badge,html[data-ma-theme="light"] .pill{background:rgba(255,255,255,.78)!important;color:#07111f!important;border-color:rgba(15,23,42,.14)!important;text-shadow:none!important;} html[data-ma-theme="light"] .branch-arrow,html[data-ma-theme="light"] .launch-arrow{color:#07111f!important;background:rgba(15,23,42,.06)!important;border-color:rgba(15,23,42,.12)!important;opacity:1!important;} @media(max-width:1180px){.ma-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}} @media(max-width:620px){.ma-preset-grid{grid-template-columns:1fr!important}.ma-preset-btn{min-height:78px!important;}} /* === Final visual cleanup: premium light mode + fixed preset/confusable UI === */ html[data-ma-theme="light"]{ --text:#07111f!important;--soft:#475569!important;--muted:#64748b!important;--panel:#ffffff!important;--panel-2:#f8fafc!important;--line:rgba(15,23,42,.14)!important; --ma-muted:#64748b!important;--ma-panel:#ffffff!important;--ma-card:#ffffff!important;--ma-bg:#edf3fb!important; } html[data-ma-theme="light"] body{ color:#07111f!important; background: radial-gradient(circle at 12% 4%, rgba(117,227,168,.18), transparent 30%), radial-gradient(circle at 88% 7%, rgba(125,181,255,.22), transparent 32%), linear-gradient(180deg,#f8fbff 0%,#eef4fb 42%,#e7eef7 100%)!important; } html[data-ma-theme="light"] .study-nav, html[data-ma-theme="light"] .topbar, html[data-ma-theme="light"] .nav-shell, html[data-ma-theme="light"] .navbar, html[data-ma-theme="light"] .header, html[data-ma-theme="light"] .profile-drawer, html[data-ma-theme="light"] #profileDrawer, html[data-ma-theme="light"] .drawer-panel{ background:rgba(255,255,255,.88)!important; color:#07111f!important; border-color:rgba(15,23,42,.14)!important; box-shadow:0 18px 50px rgba(15,23,42,.10)!important; } html[data-ma-theme="light"] .hero, html[data-ma-theme="light"] .hero.glass, html[data-ma-theme="light"] .hero-panel, html[data-ma-theme="light"] .branch, html[data-ma-theme="light"] .branch-card, html[data-ma-theme="light"] .future-card, html[data-ma-theme="light"] .about-card, html[data-ma-theme="light"] .about-point, html[data-ma-theme="light"] .launch-card, html[data-ma-theme="light"] .ma-kana-pro-card, html[data-ma-theme="light"] .ma-speed-card, html[data-ma-theme="light"] .ma-mastery-breakdown>div, html[data-ma-theme="light"] .ma-preset-track, html[data-ma-theme="light"] .ma-action-card, html[data-ma-theme="light"] .ma-mini-result-card, html[data-ma-theme="light"] .ma-result-filter-bar, html[data-ma-theme="light"] .stats-panel, html[data-ma-theme="light"] .scoreboard, html[data-ma-theme="light"] .scores-panel, html[data-ma-theme="light"] .bottom-shell, 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"] .panel, html[data-ma-theme="light"] .card, html[data-ma-theme="light"] .stat-card, html[data-ma-theme="light"] .result-card, html[data-ma-theme="light"] .drawer-user, html[data-ma-theme="light"] .ma-save-section, html[data-ma-theme="light"] .ma-qol-panel, html[data-ma-theme="light"] .ma-settings-panel{ background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.94))!important; color:#07111f!important; border-color:rgba(15,23,42,.14)!important; box-shadow:0 18px 44px rgba(15,23,42,.08)!important; text-shadow:none!important; } html[data-ma-theme="light"] .launch-card.reading, html[data-ma-theme="light"] .reading-card, html[data-ma-theme="light"] .branch.kana, html[data-ma-theme="light"] .ma-action-card.reading{ background:linear-gradient(135deg,rgba(225,250,239,.98),rgba(255,255,255,.96))!important; border-color:rgba(21,128,61,.20)!important; } 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:linear-gradient(135deg,rgba(226,240,255,.98),rgba(255,255,255,.96))!important; border-color:rgba(37,99,235,.20)!important; } html[data-ma-theme="light"] h1,html[data-ma-theme="light"] h2,html[data-ma-theme="light"] h3, html[data-ma-theme="light"] .hero-title,html[data-ma-theme="light"] .branch-name,html[data-ma-theme="light"] .launch-title, html[data-ma-theme="light"] .card-title,html[data-ma-theme="light"] .drawer-title,html[data-ma-theme="light"] .ma-kana-pro-title, html[data-ma-theme="light"] .ma-mini-result-card strong,html[data-ma-theme="light"] .ma-speed-card strong, html[data-ma-theme="light"] .ma-kana-stat .value,html[data-ma-theme="light"] .value, html[data-ma-theme="light"] strong,html[data-ma-theme="light"] b{ color:#07111f!important;text-shadow:none!important;opacity:1!important; } html[data-ma-theme="light"] p,html[data-ma-theme="light"] span,html[data-ma-theme="light"] small, html[data-ma-theme="light"] .hero-copy,html[data-ma-theme="light"] .hero-line,html[data-ma-theme="light"] .branch-copy, html[data-ma-theme="light"] .future-copy,html[data-ma-theme="light"] .section-note,html[data-ma-theme="light"] .drawer-email, html[data-ma-theme="light"] .drawer-status,html[data-ma-theme="light"] .ma-kana-pro-sub, html[data-ma-theme="light"] .ma-speed-card small,html[data-ma-theme="light"] .ma-mini-result-card span, html[data-ma-theme="light"] .ma-preset-btn small,html[data-ma-theme="light"] .ma-preset-track p, html[data-ma-theme="light"] .ma-preset-track small,html[data-ma-theme="light"] .label{ color:#475569!important;text-shadow:none!important;opacity:1!important; } html[data-ma-theme="light"] .stats-header,html[data-ma-theme="light"] .stats-panel header, html[data-ma-theme="light"] .panel-header,html[data-ma-theme="light"] .scoreboard-header, html[data-ma-theme="light"] .collapsible-header{ background:linear-gradient(180deg,#ffffff,#eef4fb)!important; color:#07111f!important; border-color:rgba(15,23,42,.14)!important; } html[data-ma-theme="light"] .nav-link,html[data-ma-theme="light"] .study-link, html[data-ma-theme="light"] .branch-link,html[data-ma-theme="light"] .profile-trigger, html[data-ma-theme="light"] .drawer-close, html[data-ma-theme="light"] .btn,html[data-ma-theme="light"] .profile-action, html[data-ma-theme="light"] .drawer-action, html[data-ma-theme="light"] .tab-button,html[data-ma-theme="light"] .toggle-btn, html[data-ma-theme="light"] .ma-preset-btn, html[data-ma-theme="light"] .ma-display-option, html[data-ma-theme="light"] .ma-qol-theme-btn{ color:#07111f!important;background:rgba(255,255,255,.92)!important;border-color:rgba(15,23,42,.18)!important;text-shadow:none!important;box-shadow:0 8px 22px rgba(15,23,42,.06)!important; } html[data-ma-theme="light"] .nav-link.active,html[data-ma-theme="light"] .study-link.active, html[data-ma-theme="light"] .tab-button.active, html[data-ma-theme="light"] .btn.active, html[data-ma-theme="light"] .toggle-btn.active, html[data-ma-theme="light"] .ma-preset-btn.active, html[data-ma-theme="light"] [aria-pressed="true"], html[data-ma-theme="light"] .ma-qol-theme-btn.active{ background:linear-gradient(135deg,rgba(219,234,254,.98),rgba(255,255,255,.96))!important; color:#0f3f80!important;border-color:rgba(37,99,235,.42)!important;box-shadow:0 0 0 3px rgba(37,99,235,.10),0 14px 34px rgba(37,99,235,.12)!important; } html[data-ma-theme="light"] .reading,html[data-ma-theme="light"] .nav-link.reading.active,html[data-ma-theme="light"] .study-link.reading.active{ color:#065f46!important;border-color:rgba(21,128,61,.30)!important; } html[data-ma-theme="light"] input,html[data-ma-theme="light"] textarea,html[data-ma-theme="light"] select{ background:#ffffff!important;color:#07111f!important;border-color:rgba(15,23,42,.20)!important; } html[data-ma-theme="light"] .ma-loading-screen{background:rgba(244,248,253,.94)!important;} html[data-ma-theme="light"] .ma-loading-card{background:#fff!important;color:#07111f!important;border-color:rgba(15,23,42,.14)!important;} .ma-preset-btn{min-height:96px!important;padding:18px 20px!important;border-radius:22px!important;gap:8px!important;align-items:flex-start!important;justify-content:center!important;text-align:left!important;} .ma-confusable-toggle::after{content:none!important;} .ma-confusable-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;} @media(max-width:1180px){} @media(max-width:620px){} /* === FINAL VERIFIED QOL REPAIR: premium light mode + working trainer controls === */ html[data-ma-theme="light"]{ --ma-bg:#eef4fb; --ma-surface:#ffffff; --ma-surface-2:#f8fbff; --ma-text:#081225; --ma-muted:#42526a; --ma-soft:#62708a; --ma-border:rgba(15,23,42,.14); --ma-shadow:0 22px 60px rgba(31,44,71,.14); } html[data-ma-theme="light"] body, html[data-ma-theme="light"] .app, html[data-ma-theme="light"] .page, html[data-ma-theme="light"] main, html[data-ma-theme="light"] .shell{ background: radial-gradient(circle at 18% 10%, rgba(83,151,255,.18), transparent 30%), radial-gradient(circle at 86% 8%, rgba(255,205,225,.18), transparent 28%), linear-gradient(180deg,#f9fbff 0%,#edf4fb 46%,#e9f0f8 100%) !important; color:#081225!important; } html[data-ma-theme="light"] .topbar, 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"] header, html[data-ma-theme="light"] .glass{ background:rgba(255,255,255,.88)!important; border-color:rgba(15,23,42,.12)!important; box-shadow:0 16px 44px rgba(31,44,71,.12)!important; color:#081225!important; } html[data-ma-theme="light"] .hero, html[data-ma-theme="light"] .landing-hero, html[data-ma-theme="light"] .hero-card, html[data-ma-theme="light"] .ma-kana-pro-card, html[data-ma-theme="light"] .ma-preset-checklist, html[data-ma-theme="light"] .dashboard-card, html[data-ma-theme="light"] .stats-card, html[data-ma-theme="light"] .stat-card, html[data-ma-theme="light"] .result-card, html[data-ma-theme="light"] .ma-mini-result-card, html[data-ma-theme="light"] .profile-drawer, html[data-ma-theme="light"] #profileDrawer, html[data-ma-theme="light"] .modal, html[data-ma-theme="light"] .panel, html[data-ma-theme="light"] .card{ background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,250,255,.92))!important; border-color:rgba(15,23,42,.13)!important; color:#081225!important; box-shadow:0 18px 48px rgba(31,44,71,.11)!important; } html[data-ma-theme="light"] .branch, html[data-ma-theme="light"] .branch.future, html[data-ma-theme="light"] .launch-card, html[data-ma-theme="light"] .test-tile, html[data-ma-theme="light"] .future-card{ color:#081225!important; background:linear-gradient(145deg,#ffffff 0%,#f6faff 72%,#eef6ff 100%)!important; border:1px solid rgba(15,23,42,.13)!important; box-shadow:0 24px 60px rgba(31,44,71,.12)!important; } html[data-ma-theme="light"] .branch.kana, html[data-ma-theme="light"] .launch-card.reading{ background:linear-gradient(145deg,#ffffff 0%,#effbf5 70%,#e6f7ee 100%)!important; border-color:rgba(18,128,80,.22)!important; } html[data-ma-theme="light"] .branch.words, html[data-ma-theme="light"] .launch-card.writing{ background:linear-gradient(145deg,#ffffff 0%,#eef6ff 72%,#e7f0ff 100%)!important; border-color:rgba(37,99,235,.22)!important; } html[data-ma-theme="light"] .branch::before, html[data-ma-theme="light"] .launch-card::before{ opacity:.18!important; } html[data-ma-theme="light"] h1, html[data-ma-theme="light"] h2, html[data-ma-theme="light"] h3, html[data-ma-theme="light"] .hero-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"] .stat-value, html[data-ma-theme="light"] .metric-value, html[data-ma-theme="light"] .drawer-title, html[data-ma-theme="light"] strong{ color:#081225!important; text-shadow:none!important; } html[data-ma-theme="light"] p, html[data-ma-theme="light"] .hero-copy, html[data-ma-theme="light"] .branch-copy, html[data-ma-theme="light"] .section-note, html[data-ma-theme="light"] .card-sub, html[data-ma-theme="light"] .muted, html[data-ma-theme="light"] .ma-kana-pro-sub, html[data-ma-theme="light"] .drawer-status, html[data-ma-theme="light"] .drawer-email, html[data-ma-theme="light"] small{ color:#42526a!important; text-shadow:none!important; } html[data-ma-theme="light"] .branch-bottom, html[data-ma-theme="light"] .launch-bottom, html[data-ma-theme="light"] .branch-bottom span, html[data-ma-theme="light"] .launch-bottom span, html[data-ma-theme="light"] .branch-label, html[data-ma-theme="light"] .branch-chip, html[data-ma-theme="light"] .launch-meta, html[data-ma-theme="light"] .mode-tag{ color:#243247!important; opacity:1!important; text-shadow:none!important; } 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"] .profile-trigger, html[data-ma-theme="light"] .drawer-action, html[data-ma-theme="light"] .btn, html[data-ma-theme="light"] button, html[data-ma-theme="light"] .toggle-btn, html[data-ma-theme="light"] .ma-preset-btn{ background:rgba(255,255,255,.92)!important; border-color:rgba(15,23,42,.15)!important; color:#081225!important; box-shadow:0 10px 24px rgba(31,44,71,.08)!important; text-shadow:none!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"] .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"] .ma-preset-btn.active, html[data-ma-theme="light"] .ma-qol-theme-btn.active{ background:linear-gradient(180deg,#fff8df,#ffe9a6)!important; border-color:rgba(197,137,28,.45)!important; color:#081225!important; box-shadow:0 12px 28px rgba(197,137,28,.14)!important; } html[data-ma-theme="light"] .launch-card.reading .launch-title, html[data-ma-theme="light"] .launch-card.reading p, html[data-ma-theme="light"] .launch-card.reading .launch-bottom, html[data-ma-theme="light"] .launch-card.writing .launch-title, html[data-ma-theme="light"] .launch-card.writing p, html[data-ma-theme="light"] .launch-card.writing .launch-bottom{ color:#081225!important; opacity:1!important; } html[data-ma-theme="light"] .bottom-shell.ma-modifiers-only, html[data-ma-theme="light"] .bottom-shell.ma-modifiers-only .drawer-content, html[data-ma-theme="light"] .bottom-shell.ma-modifiers-only .options-stack>div{ background:rgba(255,255,255,.96)!important; border-color:rgba(15,23,42,.14)!important; color:#081225!important; } html[data-ma-theme="light"] .stats-panel, html[data-ma-theme="light"] #statsPanel{ background:rgba(255,255,255,.96)!important; border-color:rgba(15,23,42,.14)!important; color:#081225!important; } html[data-ma-theme="light"] .stats-panel .panel-header, html[data-ma-theme="light"] #statsPanel .panel-header{ background:linear-gradient(180deg,#f9fbff,#e9eef6)!important; color:#081225!important; border-color:rgba(15,23,42,.12)!important; } .ma-preset-menu.final-control{padding:18px!important;border-radius:24px!important;} .ma-preset-menu.final-control .ma-preset-grid{display:grid!important;grid-template-columns:repeat(4,minmax(170px,1fr))!important;gap:12px!important;} .ma-preset-menu.final-control .ma-preset-btn{min-height:84px!important;border-radius:18px!important;padding:18px 20px!important;text-align:left!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:7px!important;font-size:20px!important;font-weight:950!important;line-height:1.05!important;} .ma-preset-menu.final-control .ma-preset-btn small{font-size:13px!important;font-weight:850!important;line-height:1.25!important;color:var(--ma-muted,#9aa7bd)!important;} .ma-preset-menu.final-control .ma-preset-btn.active{background:linear-gradient(180deg,rgba(103,215,139,.24),rgba(103,215,139,.10))!important;border-color:rgba(103,215,139,.7)!important;color:#eafff1!important;} html[data-ma-theme="light"] .ma-preset-menu.final-control .ma-preset-btn.active{background:linear-gradient(180deg,#e7fff1,#c9f6db)!important;border-color:rgba(18,128,80,.35)!important;color:#06351f!important;} .ma-confusable-final{font-weight:900!important;} @media(max-width:820px){.ma-preset-menu.final-control .ma-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.ma-preset-menu.final-control .ma-preset-btn{min-height:74px!important;font-size:17px!important;padding:14px!important}} /* === Real repair pass: richer light mode, clean controls, correct page themes === */ html[data-ma-theme="light"]{--ma-bg:#e8f0f8!important;--ma-text:#071226!important;--ma-muted:#33445c!important;--ma-soft:#51627b!important;--ma-border:rgba(31,44,71,.16)!important;--ma-shadow:0 24px 70px rgba(37,52,82,.16)!important;} html[data-ma-theme="light"] body{background:radial-gradient(circle at 12% 12%,rgba(54,211,153,.16),transparent 31%),radial-gradient(circle at 86% 10%,rgba(96,165,250,.22),transparent 32%),radial-gradient(circle at 50% 98%,rgba(251,191,36,.13),transparent 32%),linear-gradient(180deg,#f7fbff 0%,#e8f1fa 54%,#dfeaf5 100%)!important;color:#071226!important;} html[data-ma-theme="light"] .topbar,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"] header.glass{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(246,250,255,.88))!important;border-color:rgba(31,44,71,.13)!important;box-shadow:0 14px 44px rgba(37,52,82,.14)!important;} html[data-ma-theme="light"] .hero,html[data-ma-theme="light"] .landing-hero,html[data-ma-theme="light"] .hero-card,html[data-ma-theme="light"] .about-card,html[data-ma-theme="light"] .ma-kana-pro-card,html[data-ma-theme="light"] .ma-preset-checklist,html[data-ma-theme="light"] .ma-speed-mastery,html[data-ma-theme="light"] .ma-result-filter-bar,html[data-ma-theme="light"] .ma-mini-result-card,html[data-ma-theme="light"] .result-card,html[data-ma-theme="light"] .stats-panel,html[data-ma-theme="light"] #statsPanel,html[data-ma-theme="light"] .profile-drawer,html[data-ma-theme="light"] #profileDrawer,html[data-ma-theme="light"] .panel,html[data-ma-theme="light"] .card{background:radial-gradient(circle at 0% 0%,rgba(96,165,250,.10),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,249,255,.90))!important;color:#071226!important;border-color:rgba(31,44,71,.15)!important;box-shadow:0 22px 62px rgba(37,52,82,.14)!important;} html[data-ma-theme="light"] .branch.kana,html[data-ma-theme="light"] .launch-card.reading{background:radial-gradient(circle at 10% 90%,rgba(52,211,153,.20),transparent 32%),linear-gradient(145deg,#ffffff 0%,#ecfff5 62%,#dff6ec 100%)!important;border-color:rgba(21,128,61,.25)!important;} html[data-ma-theme="light"] .branch.words,html[data-ma-theme="light"] .launch-card.writing{background:radial-gradient(circle at 90% 10%,rgba(96,165,250,.24),transparent 32%),linear-gradient(145deg,#ffffff 0%,#eff6ff 62%,#ddeaff 100%)!important;border-color:rgba(37,99,235,.25)!important;} html[data-ma-theme="light"] .future-tile,html[data-ma-theme="light"] .future-card{background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(231,239,250,.68))!important;color:#071226!important;border:1px solid rgba(31,44,71,.12)!important;opacity:1!important;} html[data-ma-theme="light"] .branch-bottom,html[data-ma-theme="light"] .launch-bottom{background:rgba(255,255,255,.66)!important;border-top:1px solid rgba(31,44,71,.14)!important;color:#071226!important;} html[data-ma-theme="light"] .branch-bottom span,html[data-ma-theme="light"] .launch-bottom span,html[data-ma-theme="light"] .branch-arrow{color:#071226!important;opacity:1!important;text-shadow:none!important;} html[data-ma-theme="light"] h1,html[data-ma-theme="light"] h2,html[data-ma-theme="light"] h3,html[data-ma-theme="light"] .branch-title,html[data-ma-theme="light"] .launch-title,html[data-ma-theme="light"] .stat-value,html[data-ma-theme="light"] strong{color:#071226!important;opacity:1!important;text-shadow:none!important;} html[data-ma-theme="light"] p,html[data-ma-theme="light"] .hero-copy,html[data-ma-theme="light"] .branch-copy,html[data-ma-theme="light"] .launch-copy,html[data-ma-theme="light"] .card-sub,html[data-ma-theme="light"] .ma-kana-pro-sub,html[data-ma-theme="light"] .section-note,html[data-ma-theme="light"] small{color:#33445c!important;opacity:1!important;text-shadow:none!important;} html[data-ma-theme="light"] .nav-link,html[data-ma-theme="light"] .study-link,html[data-ma-theme="light"] .branch-link,html[data-ma-theme="light"] .profile-trigger,html[data-ma-theme="light"] .profile-action,html[data-ma-theme="light"] .drawer-action,html[data-ma-theme="light"] .btn,html[data-ma-theme="light"] button,html[data-ma-theme="light"] .toggle-btn,html[data-ma-theme="light"] .ma-preset-btn{background:linear-gradient(180deg,#ffffff,#eef4fb)!important;border-color:rgba(31,44,71,.16)!important;color:#071226!important;box-shadow:0 10px 24px rgba(37,52,82,.10)!important;} html[data-ma-theme="light"] .button.primary,html[data-ma-theme="light"] a.button.primary{background:linear-gradient(180deg,#ffe8a3,#ffd76d)!important;color:#071226!important;border-color:rgba(180,119,15,.22)!important;} html[data-ma-theme="light"] .nav-link.active,html[data-ma-theme="light"] .study-link.active,html[data-ma-theme="light"] .branch-link.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"] .ma-preset-btn.active,html[data-ma-theme="light"] .ma-qol-theme-btn.active{background:linear-gradient(180deg,#fff4cf,#ffe39a)!important;border-color:rgba(197,137,28,.42)!important;color:#071226!important;box-shadow:0 0 0 3px rgba(197,137,28,.13),0 16px 34px rgba(197,137,28,.13)!important;} .ma-preset-menu{padding:18px!important;border-radius:24px!important;}.ma-preset-grid{display:grid!important;grid-template-columns:repeat(4,minmax(170px,1fr))!important;gap:14px!important;}.ma-preset-btn{min-height:92px!important;border-radius:20px!important;padding:18px 20px!important;text-align:left!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:7px!important;}.ma-preset-btn span{font-size:20px!important;font-weight:950!important;line-height:1.05!important;}.ma-preset-btn small{font-size:13px!important;font-weight:850!important;line-height:1.25!important;}@media(max-width:900px){.ma-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}.ma-preset-btn{min-height:76px!important;}} #maConfusableNotice,.ma-confusable-notice{display:none!important;} body.ma-reading-page .bottom-shell.ma-modifiers-only .toggle-btn.active,body.ma-reading-page .bottom-shell.ma-modifiers-only .toggle-btn[aria-pressed="true"],body.ma-reading-page .ma-preset-btn.active{background:linear-gradient(180deg,rgba(103,215,139,.24),rgba(103,215,139,.11))!important;border-color:rgba(103,215,139,.72)!important;color:#eafff1!important;box-shadow:0 0 0 3px rgba(103,215,139,.13),0 12px 28px rgba(103,215,139,.10)!important;} body.ma-writing-page .bottom-shell.ma-modifiers-only .toggle-btn.active,body.ma-writing-page .bottom-shell.ma-modifiers-only .toggle-btn[aria-pressed="true"],body.ma-writing-page .ma-preset-btn.active{background:linear-gradient(180deg,rgba(96,165,250,.28),rgba(96,165,250,.12))!important;border-color:rgba(96,165,250,.78)!important;color:#eaf3ff!important;box-shadow:0 0 0 3px rgba(96,165,250,.14),0 12px 28px rgba(96,165,250,.11)!important;} html[data-ma-theme="light"] body.ma-reading-page .bottom-shell.ma-modifiers-only .toggle-btn.active,html[data-ma-theme="light"] body.ma-reading-page .bottom-shell.ma-modifiers-only .toggle-btn[aria-pressed="true"],html[data-ma-theme="light"] body.ma-reading-page .ma-preset-btn.active{background:linear-gradient(180deg,#e7fff1,#c9f6db)!important;border-color:rgba(18,128,80,.38)!important;color:#06351f!important;} html[data-ma-theme="light"] body.ma-writing-page .bottom-shell.ma-modifiers-only .toggle-btn.active,html[data-ma-theme="light"] body.ma-writing-page .bottom-shell.ma-modifiers-only .toggle-btn[aria-pressed="true"],html[data-ma-theme="light"] body.ma-writing-page .ma-preset-btn.active{background:linear-gradient(180deg,#eaf3ff,#cfe4ff)!important;border-color:rgba(37,99,235,.38)!important;color:#0b2d62!important;} .ma-qol-theme-btn.active,[data-ma-theme-choice].active{outline:2px solid rgba(125,181,255,.55)!important;outline-offset:2px!important;}html[data-ma-theme="light"] .ma-qol-theme-btn.active,html[data-ma-theme="light"] [data-ma-theme-choice].active{background:linear-gradient(180deg,#eaf3ff,#cfe4ff)!important;border-color:rgba(37,99,235,.42)!important;color:#0b2d62!important;} /* === Final requested polish: colourful premium light mode + reliable controls === */ html[data-ma-theme="light"] body, html[data-ma-theme="light"] .page-shell, html[data-ma-theme="light"] main{ background: radial-gradient(circle at 8% 10%, rgba(56,189,248,.20), transparent 30%), radial-gradient(circle at 92% 6%, rgba(167,139,250,.18), transparent 30%), radial-gradient(circle at 50% 92%, rgba(52,211,153,.16), transparent 34%), linear-gradient(135deg,#eef7ff 0%,#f7f2ff 48%,#f1fff7 100%) !important; color:#071226!important; } html[data-ma-theme="light"] .site-header, html[data-ma-theme="light"] .topbar, html[data-ma-theme="light"] .navbar, html[data-ma-theme="light"] .study-nav, html[data-ma-theme="light"] .app-nav{ background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(230,240,255,.88))!important; border-color:rgba(65,80,115,.18)!important; box-shadow:0 18px 54px rgba(51,70,105,.16)!important; } html[data-ma-theme="light"] .hero, html[data-ma-theme="light"] .landing-hero, html[data-ma-theme="light"] .branch-card, html[data-ma-theme="light"] .study-card, html[data-ma-theme="light"] .mode-card, html[data-ma-theme="light"] .trainer-card, html[data-ma-theme="light"] .ma-kana-pro-card, html[data-ma-theme="light"] .ma-preset-menu, html[data-ma-theme="light"] .bottom-shell, html[data-ma-theme="light"] .stats-panel, html[data-ma-theme="light"] #statsPanel, html[data-ma-theme="light"] .result-card, html[data-ma-theme="light"] .ma-mini-result-card, html[data-ma-theme="light"] .profile-drawer, html[data-ma-theme="light"] .panel, html[data-ma-theme="light"] .card{ background: radial-gradient(circle at 0% 0%,rgba(96,165,250,.16),transparent 34%), radial-gradient(circle at 100% 0%,rgba(52,211,153,.12),transparent 32%), linear-gradient(180deg,rgba(255,255,255,.94),rgba(234,243,255,.86))!important; border-color:rgba(59,75,110,.20)!important; color:#071226!important; box-shadow:0 22px 60px rgba(51,70,105,.15)!important; } html[data-ma-theme="light"] body.ma-reading-page .mode-card, html[data-ma-theme="light"] .reading-card, html[data-ma-theme="light"] .branch-card.kana, html[data-ma-theme="light"] .ma-action-card.reading{ background:radial-gradient(circle at 8% 8%,rgba(16,185,129,.24),transparent 38%),linear-gradient(135deg,#f4fff9,#dff8ec)!important; border-color:rgba(16,128,82,.26)!important; } html[data-ma-theme="light"] body.ma-writing-page .mode-card, html[data-ma-theme="light"] .writing-card{ background:radial-gradient(circle at 8% 8%,rgba(59,130,246,.24),transparent 38%),linear-gradient(135deg,#f6fbff,#dbeafe)!important; border-color:rgba(37,99,235,.26)!important; } html[data-ma-theme="light"] h1,html[data-ma-theme="light"] h2,html[data-ma-theme="light"] h3, html[data-ma-theme="light"] .title,html[data-ma-theme="light"] .card-title, html[data-ma-theme="light"] .section-title,html[data-ma-theme="light"] strong{ color:#071226!important;text-shadow:none!important; } html[data-ma-theme="light"] p,html[data-ma-theme="light"] small,html[data-ma-theme="light"] span, html[data-ma-theme="light"] .muted,html[data-ma-theme="light"] .subtitle, html[data-ma-theme="light"] .ma-kana-pro-sub{ color:#40506a!important;text-shadow:none!important; } html[data-ma-theme="light"] .nav-link,html[data-ma-theme="light"] .study-link,html[data-ma-theme="light"] .branch-link, html[data-ma-theme="light"] .profile-trigger,html[data-ma-theme="light"] .btn, html[data-ma-theme="light"] .toggle-btn,html[data-ma-theme="light"] .ma-preset-btn, html[data-ma-theme="light"] .drawer-action,html[data-ma-theme="light"] button{ background:linear-gradient(180deg,#ffffff,#eaf2fb)!important; color:#081424!important; border-color:rgba(44,59,90,.20)!important; box-shadow:0 10px 24px rgba(48,65,96,.12)!important; text-shadow:none!important; } html[data-ma-theme="light"] body.ma-reading-page .toggle-btn.active, html[data-ma-theme="light"] body.ma-reading-page .toggle-btn[aria-pressed="true"], html[data-ma-theme="light"] body.ma-reading-page .ma-preset-btn.active{ background:linear-gradient(180deg,#d9fae8,#aef0cd)!important; border-color:rgba(14,140,82,.48)!important; color:#052f1d!important; box-shadow:0 0 0 4px rgba(16,185,129,.16),0 16px 34px rgba(16,185,129,.18)!important; } html[data-ma-theme="light"] body.ma-writing-page .toggle-btn.active, html[data-ma-theme="light"] body.ma-writing-page .toggle-btn[aria-pressed="true"], html[data-ma-theme="light"] body.ma-writing-page .ma-preset-btn.active{ background:linear-gradient(180deg,#dcecff,#afd2ff)!important; border-color:rgba(37,99,235,.50)!important; color:#09285a!important; box-shadow:0 0 0 4px rgba(59,130,246,.16),0 16px 34px rgba(59,130,246,.18)!important; } html[data-ma-theme="light"] .ma-qol-theme-btn.active, html[data-ma-theme="light"] [data-ma-theme-choice].active, html[data-ma-theme="light"] .ma-display-option.active{ background:linear-gradient(180deg,#fff0bf,#ffd86c)!important; border-color:rgba(185,124,20,.45)!important; color:#171006!important; } .ma-preset-menu{margin-bottom:16px!important;} .ma-preset-grid{grid-template-columns:repeat(4,minmax(180px,1fr))!important;gap:16px!important;} .ma-preset-btn{min-height:104px!important;padding:20px 22px!important;border-radius:22px!important;} .ma-preset-btn span{font-size:22px!important;} #maConfusableNotice,.ma-confusable-notice,[data-ma-confusable-final],.ma-confusable-final{display:none!important;} body.ma-writing-page .toggle-btn.active,body.ma-writing-page .toggle-btn[aria-pressed="true"]{background:linear-gradient(180deg,rgba(96,165,250,.30),rgba(96,165,250,.13))!important;border-color:rgba(96,165,250,.78)!important;color:#eaf3ff!important;} @media(max-width:900px){.ma-preset-btn{min-height:86px!important}} /* === Focused polish pass: premium light mode + reading green active presets === */ /* Reading active controls must be green in both themes. Keep writing blue. */ body.ma-reading-page .ma-preset-btn.active, body.ma-reading-page .ma-preset-btn[aria-pressed="true"], body.ma-reading-page .bottom-shell .toggle-btn.active, body.ma-reading-page .bottom-shell .toggle-btn[aria-pressed="true"]{ background:linear-gradient(180deg,rgba(103,215,139,.28),rgba(103,215,139,.12))!important; border-color:rgba(103,215,139,.82)!important; color:#eafff1!important; box-shadow:0 0 0 4px rgba(103,215,139,.16),0 16px 34px rgba(103,215,139,.13)!important; } body.ma-writing-page .ma-preset-btn.active, body.ma-writing-page .ma-preset-btn[aria-pressed="true"], body.ma-writing-page .bottom-shell .toggle-btn.active, body.ma-writing-page .bottom-shell .toggle-btn[aria-pressed="true"]{ background:linear-gradient(180deg,rgba(96,165,250,.32),rgba(96,165,250,.14))!important; border-color:rgba(96,165,250,.82)!important; color:#eaf3ff!important; box-shadow:0 0 0 4px rgba(96,165,250,.16),0 16px 34px rgba(96,165,250,.13)!important; } /* Give light mode a real palette rather than flat white. */ 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"] main{ background: radial-gradient(circle at 6% 8%, rgba(56,189,248,.28), transparent 28%), radial-gradient(circle at 94% 5%, rgba(168,85,247,.20), transparent 28%), radial-gradient(circle at 15% 82%, rgba(16,185,129,.20), transparent 30%), radial-gradient(circle at 88% 76%, rgba(251,191,36,.14), transparent 30%), linear-gradient(135deg,#e8f6ff 0%,#f1ecff 45%,#ebfff5 100%) !important; color:#071226!important; } html[data-ma-theme="light"] .site-header, html[data-ma-theme="light"] .topbar, html[data-ma-theme="light"] .navbar, html[data-ma-theme="light"] .study-nav, html[data-ma-theme="light"] .branch-nav, html[data-ma-theme="light"] .app-nav{ background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(226,239,255,.86) 52%,rgba(245,237,255,.88))!important; border-color:rgba(43,58,90,.18)!important; box-shadow:0 18px 54px rgba(55,70,102,.16)!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"] .card, html[data-ma-theme="light"] .panel, html[data-ma-theme="light"] .bottom-shell, html[data-ma-theme="light"] .modifier-panel, html[data-ma-theme="light"] .ma-preset-menu, 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"] .result-card, html[data-ma-theme="light"] .test-card, html[data-ma-theme="light"] .ma-mini-result-card, html[data-ma-theme="light"] .ma-kana-pro-card, html[data-ma-theme="light"] .ma-speed-card, html[data-ma-theme="light"] .ma-mastery-breakdown>div, html[data-ma-theme="light"] .profile-drawer, html[data-ma-theme="light"] #profileDrawer{ background: radial-gradient(circle at 0% 0%,rgba(59,130,246,.16),transparent 36%), radial-gradient(circle at 100% 4%,rgba(16,185,129,.12),transparent 36%), linear-gradient(180deg,rgba(255,255,255,.94),rgba(236,246,255,.88))!important; color:#071226!important; border-color:rgba(43,58,90,.18)!important; box-shadow:0 24px 64px rgba(55,70,102,.15)!important; } /* Index branch cards: remove the ugly full-width white strip and make CTA feel intentional. */ html[data-ma-theme="light"] .branch{ color:#071226!important; border-color:rgba(43,58,90,.18)!important; box-shadow:0 28px 70px rgba(55,70,102,.17)!important; } html[data-ma-theme="light"] .branch.kana{ background: radial-gradient(circle at 12% 12%,rgba(16,185,129,.22),transparent 38%), radial-gradient(circle at 92% 10%,rgba(59,130,246,.22),transparent 36%), linear-gradient(135deg,#f9fffc 0%,#e1f8ed 100%)!important; } html[data-ma-theme="light"] .branch.words{ background: radial-gradient(circle at 12% 12%,rgba(251,191,36,.20),transparent 38%), radial-gradient(circle at 92% 10%,rgba(244,114,182,.22),transparent 36%), linear-gradient(135deg,#fffdf6 0%,#fff0f7 100%)!important; } html[data-ma-theme="light"] .branch.future{ background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(226,236,249,.78))!important; } html[data-ma-theme="light"] .branch-bottom, html[data-ma-theme="light"] .launch-bottom{ background:transparent!important; border-top:1px solid rgba(43,58,90,.14)!important; color:#071226!important; box-shadow:none!important; } html[data-ma-theme="light"] .branch-bottom span:first-child, html[data-ma-theme="light"] .launch-bottom span:first-child{ color:#071226!important; background:transparent!important; box-shadow:none!important; } html[data-ma-theme="light"] .branch-arrow, html[data-ma-theme="light"] .launch-arrow{ background:rgba(255,255,255,.72)!important; border:1px solid rgba(43,58,90,.20)!important; color:#071226!important; box-shadow:0 8px 22px rgba(55,70,102,.12)!important; } html[data-ma-theme="light"] .branch-label, html[data-ma-theme="light"] .branch-chip, html[data-ma-theme="light"] .section-kicker{ color:#33445c!important; text-shadow:none!important; } html[data-ma-theme="light"] .branch-chip{ background:rgba(255,255,255,.55)!important; border-color:rgba(43,58,90,.16)!important; } /* Results light mode: keep the gold theme but make the large selected panel readable. */ html[data-ma-theme="light"] .mega-score, html[data-ma-theme="light"] .mega-score.average{ background: radial-gradient(circle at 92% 0%,rgba(251,191,36,.24),transparent 38%), linear-gradient(135deg,#fff9e9 0%,#f5e5b6 48%,#fffdf7 100%)!important; border-color:rgba(185,124,20,.28)!important; color:#071226!important; box-shadow:0 20px 50px rgba(120,85,25,.14)!important; } html[data-ma-theme="light"] .mega-score.reading{ background:radial-gradient(circle at 92% 0%,rgba(16,185,129,.22),transparent 38%),linear-gradient(135deg,#f4fff9,#dff8ec)!important; border-color:rgba(16,128,82,.25)!important; } html[data-ma-theme="light"] .mega-score.writing{ background:radial-gradient(circle at 92% 0%,rgba(59,130,246,.23),transparent 38%),linear-gradient(135deg,#f6fbff,#dbeafe)!important; border-color:rgba(37,99,235,.25)!important; } html[data-ma-theme="light"] .mega-kicker, html[data-ma-theme="light"] .mega-value, html[data-ma-theme="light"] .mega-sub, html[data-ma-theme="light"] #overallSelectedName{ color:#071226!important; text-shadow:none!important; } html[data-ma-theme="light"] .summary-item, html[data-ma-theme="light"] .meta-card, html[data-ma-theme="light"] .detail-metric{ background:rgba(255,255,255,.74)!important; color:#071226!important; border-color:rgba(43,58,90,.15)!important; } /* Light active control colours by page */ 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,#d9fae8,#a8edc9)!important; border-color:rgba(14,140,82,.55)!important; color:#052f1d!important; box-shadow:0 0 0 4px rgba(16,185,129,.18),0 16px 34px rgba(16,185,129,.18)!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,#dcecff,#afd2ff)!important; border-color:rgba(37,99,235,.55)!important; color:#09285a!important; box-shadow:0 0 0 4px rgba(59,130,246,.18),0 16px 34px rgba(59,130,246,.18)!important; } /* === Mode Atlas QOL batch styles === */ .bottom-shell.ma-modifiers-only .drawer-content{ max-height:min(72vh,720px) !important; overflow:auto !important; } .bottom-shell.ma-modifiers-only .options-stack{ width:min(1280px,100%) !important; display:grid !important; grid-template-columns:1fr !important; gap:14px !important; } .bottom-shell.ma-modifiers-only .options-stack > div, .bottom-shell.ma-modifiers-only .ma-settings-section{ padding:16px !important; border-radius:22px !important; } .ma-structured-modifiers{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important; } .ma-modifier-group{ padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:20px; background:rgba(255,255,255,.035); } .ma-modifier-group-title{ color:var(--muted,#aab4c5); text-transform:uppercase; font-weight:900; letter-spacing:.13em; font-size:11px; margin-bottom:10px; } .ma-modifier-group-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .ma-structured-toggle{ min-height:48px !important; display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; line-height:1.05 !important; padding:10px !important; } .ma-reading-page .ma-preset-btn.active, .ma-reading-page .ma-structured-toggle.active{ background:linear-gradient(180deg,rgba(86,210,126,.28),rgba(86,210,126,.13)) !important; border-color:rgba(86,210,126,.75) !important; color:#e8fff0 !important; box-shadow:0 0 0 2px rgba(86,210,126,.22),0 14px 34px rgba(74,222,128,.12) !important; } .ma-writing-page .ma-preset-btn.active, .ma-writing-page .ma-structured-toggle.active{ background:linear-gradient(180deg,rgba(96,165,250,.30),rgba(96,165,250,.15)) !important; border-color:rgba(96,165,250,.82) !important; color:#eef6ff !important; box-shadow:0 0 0 2px rgba(96,165,250,.24),0 14px 34px rgba(59,130,246,.14) !important; } html[data-ma-theme="light"] body{ background: radial-gradient(circle at 9% 8%, rgba(125,211,252,.34), transparent 28%), radial-gradient(circle at 88% 12%, rgba(196,181,253,.28), transparent 28%), radial-gradient(circle at 50% 95%, rgba(134,239,172,.18), transparent 32%), linear-gradient(180deg,#eef7ff 0%,#f7fbff 42%,#edf4ff 100%) !important; color:#071226 !important; } html[data-ma-theme="light"] .branch-card, html[data-ma-theme="light"] .tool-card, html[data-ma-theme="light"] .ma-branch-card{ background: radial-gradient(circle at 18% 18%,rgba(34,197,94,.16),transparent 35%), radial-gradient(circle at 88% 18%,rgba(96,165,250,.18),transparent 34%), linear-gradient(135deg,rgba(255,255,255,.94),rgba(230,242,255,.86)) !important; border-color:rgba(59,85,128,.18) !important; box-shadow:0 28px 70px rgba(45,68,105,.18) !important; color:#081225 !important; } html[data-ma-theme="light"] .branch-card a, html[data-ma-theme="light"] .branch-card button, html[data-ma-theme="light"] .tool-card a, html[data-ma-theme="light"] .tool-card button{ background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(232,242,255,.78)) !important; border:1px solid rgba(51,74,112,.18) !important; color:#071226 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 26px rgba(48,68,105,.12) !important; } html[data-ma-theme="light"] .bottom-shell.ma-modifiers-only .drawer-content, html[data-ma-theme="light"] .bottom-shell.ma-modifiers-only .options-stack > div, html[data-ma-theme="light"] .ma-modifier-group, html[data-ma-theme="light"] .ma-preset-menu, html[data-ma-theme="light"] .side-panel, html[data-ma-theme="light"] .score-block, html[data-ma-theme="light"] .stat-card, html[data-ma-theme="light"] .ma-kana-pro-card, html[data-ma-theme="light"] .ma-no-data-card, html[data-ma-theme="light"] .result-card, html[data-ma-theme="light"] .snapshot-card, html[data-ma-theme="light"] .profile-drawer, html[data-ma-theme="light"] .modal{ background: radial-gradient(circle at 0% 0%,rgba(96,165,250,.13),transparent 38%), linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,247,255,.91)) !important; border-color:rgba(35,55,90,.16) !important; color:#071226 !important; box-shadow:0 22px 58px rgba(40,60,96,.15) !important; } html[data-ma-theme="light"] .game-card, html[data-ma-theme="light"] .practice-card{ background: radial-gradient(circle at 12% 0%,rgba(59,130,246,.12),transparent 38%), linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,251,255,.92)) !important; color:#071226 !important; } html[data-ma-theme="light"] p, html[data-ma-theme="light"] small, html[data-ma-theme="light"] .sub, html[data-ma-theme="light"] .ma-kana-pro-sub, html[data-ma-theme="light"] .score-row span:first-child, html[data-ma-theme="light"] .label{ color:#3a4a62 !important; } html[data-ma-theme="light"] .ma-reading-page .ma-preset-btn.active, html[data-ma-theme="light"] .ma-reading-page .ma-structured-toggle.active{ color:#06391b !important; background:linear-gradient(180deg,#d8f8e2,#bff0d0) !important; } html[data-ma-theme="light"] .ma-writing-page .ma-preset-btn.active, html[data-ma-theme="light"] .ma-writing-page .ma-structured-toggle.active{ color:#082b60 !important; background:linear-gradient(180deg,#dcecff,#bdd9ff) !important; } .ma-achievement-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .ma-achievement-card{ border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); border-radius:18px; padding:16px; } .ma-achievement-top{ display:flex; justify-content:space-between; gap:10px; font-size:18px; } .ma-achievement-card small{display:block;margin:8px 0 12px;color:var(--muted,#aab4c5);font-weight:750} .ma-progress-track{ height:10px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.08); } .ma-progress-track span{ display:block; height:100%; background:linear-gradient(90deg,#67d78b,#60a5fa); border-radius:inherit; } .ma-achievement-card em{display:block;margin-top:10px;font-style:normal;color:var(--muted,#aab4c5);font-weight:800} .ma-achievement-card.done{ border-color:rgba(103,215,139,.55); background:linear-gradient(180deg,rgba(103,215,139,.14),rgba(103,215,139,.05)); } .ma-session-actions-pro{ width:100%; display:grid; gap:12px; margin-bottom:12px; } .ma-session-summary{ text-align:left; border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:12px 14px; background:rgba(255,255,255,.04); } .ma-session-summary strong{display:block;font-size:18px;margin-bottom:4px} .ma-session-summary span{color:var(--muted,#aab4c5)} .ma-session-action-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .ma-session-action-grid button, .ma-import-preview-actions button, .ma-whats-new-modal button, .ma-no-data-actions a, .ma-install-prompt button{ min-height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); color:inherit; font-weight:900; padding:0 14px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; } .ma-session-action-grid button:disabled{opacity:.45;cursor:not-allowed} .ma-import-preview-backdrop, .ma-whats-new-backdrop{ position:fixed; inset:0; z-index:50000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); backdrop-filter:blur(10px); } .ma-import-preview-backdrop.open, .ma-whats-new-backdrop.open{display:flex} .ma-import-preview-modal, .ma-whats-new-modal{ width:min(620px,calc(100vw - 28px)); border-radius:28px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,#171d2a,#0f121a); color:#fff; box-shadow:0 30px 90px rgba(0,0,0,.45); padding:24px; } .ma-import-preview-list{ display:grid; gap:8px; margin:16px 0; } .ma-import-preview-list div{ display:flex; justify-content:space-between; gap:14px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.045); border-radius:14px; padding:10px 12px; } .ma-import-preview-actions{ display:flex; justify-content:flex-end; gap:10px; } .ma-no-data-card{ margin:18px auto; width:min(1320px,calc(100% - 36px)); border-radius:26px; border:1px solid rgba(255,255,255,.10); padding:24px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); } .ma-no-data-card h2{margin:0 0 8px} .ma-no-data-card p{margin:0 0 16px} .ma-no-data-actions{display:flex;gap:10px;flex-wrap:wrap} .ma-install-prompt{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:40000; width:min(620px,calc(100vw - 28px)); display:flex; gap:12px; align-items:center; justify-content:space-between; border-radius:22px; border:1px solid rgba(255,255,255,.16); background:linear-gradient(180deg,rgba(22,29,42,.96),rgba(12,15,22,.96)); color:white; box-shadow:0 24px 70px rgba(0,0,0,.42); padding:14px; } .ma-install-prompt div{display:grid;gap:2px} .ma-install-prompt span{color:#aab4c5} html[data-ma-theme="light"] .ma-import-preview-modal, html[data-ma-theme="light"] .ma-whats-new-modal, html[data-ma-theme="light"] .ma-install-prompt{ background:linear-gradient(180deg,#ffffff,#eef6ff); color:#071226; border-color:rgba(35,55,90,.16); } @media (max-width:900px){ .ma-structured-modifiers{grid-template-columns:1fr !important} .ma-achievement-grid{grid-template-columns:1fr 1fr} .ma-session-action-grid{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .ma-achievement-grid{grid-template-columns:1fr} } /* === About Mode Atlas modal === */ .ma-about-backdrop{position:fixed;inset:0;z-index:16000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(3,6,14,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} .ma-about-backdrop.open{display:flex} .ma-about-modal{width:min(980px,calc(100vw - 32px));max-height:calc(100vh - 36px);overflow:auto;border-radius:34px;padding:24px;background:radial-gradient(circle at 15% 0%,rgba(97,223,151,.14),transparent 28%),radial-gradient(circle at 85% 4%,rgba(97,154,255,.18),transparent 32%),linear-gradient(180deg,rgba(24,31,45,.98),rgba(10,13,22,.98));border:1px solid rgba(255,255,255,.13);box-shadow:0 34px 120px rgba(0,0,0,.55);color:#f8fafc} .ma-about-hero{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px;border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.10)} .ma-about-mark{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-weight:950;color:#06121f;background:linear-gradient(135deg,#76e6af,#7bb8ff);box-shadow:0 16px 40px rgba(87,166,255,.20)} .ma-about-kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#aebbd0;font-weight:900}.ma-about-hero h2{margin:2px 0 6px;font-size:clamp(28px,4vw,48px);line-height:.98;letter-spacing:-.05em}.ma-about-hero p{margin:0;color:#b9c4d6;font-size:15px;line-height:1.45}.ma-about-close,.ma-about-primary{border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.08);color:#f8fafc;font-weight:900;padding:12px 16px;cursor:pointer}.ma-about-primary{background:linear-gradient(135deg,rgba(94,234,151,.22),rgba(96,165,250,.20));border-color:rgba(125,181,255,.28)} .ma-about-tabs{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap}.ma-about-tabs button{border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.055);color:#cbd5e1;font-weight:950;padding:11px 16px;cursor:pointer}.ma-about-tabs button.active{color:#07111f;background:linear-gradient(135deg,#76e6af,#8fc1ff);border-color:transparent;box-shadow:0 14px 34px rgba(87,166,255,.18)} .ma-about-panel{display:none}.ma-about-panel.active{display:block}.ma-about-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.ma-about-card,.ma-about-section{border-radius:24px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));box-shadow:0 20px 55px rgba(0,0,0,.18)}.ma-about-card{padding:18px}.ma-about-card span{display:block;color:#aebbd0;text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:950}.ma-about-card strong{display:block;margin-top:8px;font-size:22px;letter-spacing:-.03em}.ma-about-card small{display:block;margin-top:8px;color:#aebbd0;line-height:1.35}.ma-about-section{padding:20px;margin-top:14px}.ma-about-section h3{margin:0 0 12px;font-size:22px;letter-spacing:-.03em}.ma-about-section p{margin:8px 0;color:#c4cedd;line-height:1.55}.ma-about-muted{color:#9eabba!important}.ma-about-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ma-about-table>div{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:13px 14px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}.ma-about-table span{color:#aebbd0}.ma-about-table strong{font-weight:950;text-align:right}.ma-about-list{margin:12px 0 18px;padding:0;list-style:none;display:grid;gap:10px}.ma-about-list li{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:#dbeafe}.ma-about-list li:before{content:'•';color:#76e6af;font-weight:950;margin-right:10px} html[data-ma-theme="light"] .ma-about-backdrop{background:rgba(218,230,245,.70)} html[data-ma-theme="light"] .ma-about-modal{background:radial-gradient(circle at 12% 0%,rgba(16,185,129,.18),transparent 31%),radial-gradient(circle at 88% 2%,rgba(59,130,246,.18),transparent 34%),linear-gradient(180deg,#f8fbff,#edf4fb);border-color:rgba(79,103,134,.20);color:#0f172a;box-shadow:0 34px 100px rgba(78,100,130,.28)} html[data-ma-theme="light"] .ma-about-hero,html[data-ma-theme="light"] .ma-about-card,html[data-ma-theme="light"] .ma-about-section{background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(235,244,255,.76));border-color:rgba(79,103,134,.18);box-shadow:0 18px 48px rgba(80,105,135,.13)} html[data-ma-theme="light"] .ma-about-hero p,html[data-ma-theme="light"] .ma-about-section p{color:#41516a}html[data-ma-theme="light"] .ma-about-kicker,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-table span,html[data-ma-theme="light"] .ma-about-muted{color:#64748b!important}html[data-ma-theme="light"] .ma-about-close{background:#fff;color:#0f172a;border-color:rgba(79,103,134,.22)}html[data-ma-theme="light"] .ma-about-tabs button{background:#fff;color:#334155;border-color:rgba(79,103,134,.20)}html[data-ma-theme="light"] .ma-about-tabs button.active{color:#052e2b;background:linear-gradient(135deg,#c7f9df,#cfe6ff)}html[data-ma-theme="light"] .ma-about-table>div,html[data-ma-theme="light"] .ma-about-list li{background:rgba(255,255,255,.72);border-color:rgba(79,103,134,.14);color:#1e293b} @media(max-width:800px){.ma-about-hero{grid-template-columns:1fr}.ma-about-close{justify-self:start}.ma-about-grid{grid-template-columns:1fr 1fr}.ma-about-table{grid-template-columns:1fr}}@media(max-width:520px){.ma-about-grid{grid-template-columns:1fr}.ma-about-modal{padding:16px;border-radius:26px}} /* === Live push auth + mobile navigation stabilization === */ html[data-ma-signed-in="true"] #profileSignInBtn, html[data-ma-signed-in="true"] #studyProfileSignIn, html[data-ma-signed-in="true"] #identitySignInBtn, html[data-ma-signed-in="true"] [data-profile-sign-in], html[data-ma-signed-in="true"] [data-ma-sign-in]{display:none!important;visibility:hidden!important;pointer-events:none!important;} html[data-ma-signed-in="false"] #profileSignOutBtn, html[data-ma-signed-in="false"] #studyProfileSignOut, html[data-ma-signed-in="false"] #identitySignOutBtn, html[data-ma-signed-in="false"] [data-profile-sign-out], html[data-ma-signed-in="false"] [data-ma-sign-out]{display:none!important;visibility:hidden!important;pointer-events:none!important;} html[data-ma-signed-in="true"] #profileSignOutBtn, html[data-ma-signed-in="true"] #studyProfileSignOut, html[data-ma-signed-in="true"] #identitySignOutBtn, html[data-ma-signed-in="true"] [data-profile-sign-out], html[data-ma-signed-in="true"] [data-ma-sign-out], html[data-ma-signed-in="false"] #profileSignInBtn, html[data-ma-signed-in="false"] #studyProfileSignIn, html[data-ma-signed-in="false"] #identitySignInBtn, html[data-ma-signed-in="false"] [data-profile-sign-in], html[data-ma-signed-in="false"] [data-ma-sign-in]{visibility:visible!important;pointer-events:auto!important;} @media (max-width: 820px){ body{overflow-x:hidden!important;} .topbar,.branch-nav,.study-nav,.nav-shell,.site-header,.app-nav{ width:calc(100vw - 16px)!important; max-width:calc(100vw - 16px)!important; margin-left:8px!important; margin-right:8px!important; left:0!important; right:0!important; box-sizing:border-box!important; border-radius:22px!important; } .topbar,.branch-nav,.nav-shell,.site-header,.app-nav{ padding:8px!important; min-height:0!important; } .study-nav{ top:8px!important; padding:8px!important; gap:8px!important; display:grid!important; grid-template-columns:1fr auto!important; align-items:center!important; } .study-brand,.branch-brand,.brand{ min-width:0!important; overflow:hidden!important; } .study-brand-text,.branch-meta,.brand-text{min-width:0!important;} .study-title,.branch-name,.brand-name{ white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; max-width:52vw!important; } .study-platform,.branch-kicker{font-size:10px!important;letter-spacing:.12em!important;} .study-mark,.branch-mark,.logo-mark,.brand-mark{ width:38px!important;height:38px!important;min-width:38px!important;border-radius:14px!important;font-size:14px!important; } .study-links,.branch-links,.nav{ grid-column:1 / -1!important; display:flex!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch!important; gap:8px!important; padding:2px 0 3px!important; scrollbar-width:none!important; justify-content:flex-start!important; } .study-links::-webkit-scrollbar,.branch-links::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none!important;} .study-link,.branch-link,.nav-link,.study-nav-btn,.profile-trigger{ flex:0 0 auto!important; min-height:42px!important; height:42px!important; padding:0 14px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; white-space:nowrap!important; line-height:1!important; border-radius:999px!important; font-size:14px!important; } .study-nav-actions{ display:flex!important; justify-content:flex-end!important; align-items:center!important; gap:8px!important; min-width:0!important; } .study-nav-btn.profile-trigger > span:not(.profile-dot), .profile-trigger > span:not(.profile-dot){display:none!important;} .study-nav-btn.hide{ min-width:42px!important; width:42px!important; padding:0!important; font-size:0!important; } .study-nav-btn.hide::after{content:'–';font-size:24px;line-height:1;font-weight:900;} .study-nav-handle{ left:50%!important; right:auto!important; transform:translateX(-50%)!important; bottom:calc(12px + env(safe-area-inset-bottom))!important; top:auto!important; z-index:120!important; min-height:46px!important; padding:0 18px!important; border-radius:999px!important; } .profile-drawer,#profileDrawer,.drawer-panel{ width:calc(100vw - 20px)!important; max-width:calc(100vw - 20px)!important; right:10px!important; left:10px!important; top:10px!important; max-height:calc(100vh - 20px)!important; border-radius:22px!important; padding:14px!important; box-sizing:border-box!important; } .drawer-actions,.profile-actions,.ma-save-grid,.ma-qol-grid{ display:grid!important; grid-template-columns:1fr!important; gap:10px!important; } .drawer-action,.profile-action,.ma-qol-grid .drawer-action,.ma-qol-grid .profile-action{ width:100%!important; min-height:48px!important; } .shell,.app-shell,.main,.container,.page-wrap{width:100%!important;max-width:100vw!important;box-sizing:border-box!important;} } @media (max-width: 520px){ .study-title,.branch-name,.brand-name{max-width:45vw!important;font-size:14px!important;} .study-link,.branch-link,.nav-link{font-size:13px!important;padding:0 12px!important;} .study-nav{grid-template-columns:minmax(0,1fr) auto!important;} .profile-dot{width:32px!important;height:32px!important;min-width:32px!important;} } /* v2.8.9 loader safety: keep the branded loading screen, but never let a stale script trap the app forever. */ #maLoadingScreen { animation: maLoaderSafetyFade 0.25s ease 3.6s forwards; } #maLoadingScreen.done { animation: none; } @keyframes maLoaderSafetyFade { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* === v2.9.3 mobile + iPad layout pass === */ :root{--ma-mobile-gutter: clamp(14px, 4vw, 24px);} html, body{max-width:100%; overflow-x:hidden;} @media (max-width: 900px){ body{padding-left:var(--ma-mobile-gutter)!important;padding-right:var(--ma-mobile-gutter)!important;} .shell,.app-shell,.main,.container,.page,.content{width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;} } /* Phone nav: stable two-row card. Profile/avatar lives on row 1 and never covers row 2. */ @media (max-width: 760px), (max-width: 900px) and (orientation: portrait){ .topbar,.branch-nav,.study-nav{ width:100%!important;max-width:100%!important;margin:12px auto 18px!important; padding:14px!important;border-radius:28px!important;overflow:hidden!important; display:grid!important;grid-template-columns:1fr auto!important;grid-template-rows:auto auto!important; gap:12px!important;align-items:center!important;position:relative!important;top:auto!important; } .brand,.branch-brand,.study-brand{ grid-column:1!important;grid-row:1!important;max-width:calc(100vw - 132px)!important; min-width:0!important;display:inline-flex!important;align-items:center!important;gap:12px!important; } .brand-mark,.branch-mark,.study-mark{width:52px!important;height:52px!important;min-width:52px!important;border-radius:18px!important;} .brand-name,.branch-name,.study-title{font-size:clamp(1.05rem,4.7vw,1.4rem)!important;line-height:1.06!important;white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;} .brand-sub,.branch-kicker,.study-platform,.study-brand-text{display:none!important;} .branch-links,.study-links,.nav{ grid-column:1 / -1!important;grid-row:2!important;display:flex!important;align-items:center!important; gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important; overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important; padding:2px 0 4px!important;margin:0!important;scroll-padding-inline:0!important; } .branch-links::-webkit-scrollbar,.study-links::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none!important;} .branch-link,.study-link,.nav-link,.study-nav-btn.hide{ flex:0 0 auto!important;min-width:max-content!important;height:46px!important;padding:0 15px!important; border-radius:999px!important;font-size:clamp(.9rem,3.7vw,1.02rem)!important;line-height:1!important; display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important; } /* Profile button: one fixed location inside the nav card, not part of the scroller. */ .branch-links > .profile-trigger, .nav > .profile-trigger, .topbar > .profile-trigger, .study-nav-btn.profile-trigger, #profileOpenBtn,#studyProfileBtn{ position:absolute!important;top:14px!important;right:14px!important;z-index:8!important; width:56px!important;height:56px!important;min-width:56px!important;max-width:56px!important; padding:0!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important; overflow:hidden!important;transform:none!important;margin:0!important; } .profile-trigger > span:not(.profile-dot),.study-nav-btn.profile-trigger > span:not(.profile-dot),#profileOpenBtn > span:not(.profile-dot),#studyProfileBtn > span:not(.profile-dot){display:none!important;} .profile-dot,#topProfileDot,#profileDot,#studyTopProfileDot{width:42px!important;height:42px!important;min-width:42px!important;border-radius:999px!important;overflow:hidden!important;font-size:0!important;} .profile-dot img,#topProfileDot img,#profileDot img,#studyTopProfileDot img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;} .study-nav-actions{display:contents!important;} .study-nav-btn.hide{position:static!important;order:99!important;} } /* Very small phones: use a compact header and reduce oversized hero/card typography. */ @media (max-width: 520px){ body{padding-left:12px!important;padding-right:12px!important;} .topbar,.branch-nav,.study-nav{border-radius:24px!important;padding:12px!important;gap:10px!important;margin-top:10px!important;} .brand-mark,.branch-mark,.study-mark{width:48px!important;height:48px!important;min-width:48px!important;border-radius:16px!important;} .branch-links > .profile-trigger,.nav > .profile-trigger,.topbar > .profile-trigger,.study-nav-btn.profile-trigger,#profileOpenBtn,#studyProfileBtn{top:12px!important;right:12px!important;width:52px!important;height:52px!important;min-width:52px!important;max-width:52px!important;} .profile-dot,#topProfileDot,#profileDot,#studyTopProfileDot{width:39px!important;height:39px!important;min-width:39px!important;} .branch-link,.study-link,.nav-link,.study-nav-btn.hide{height:44px!important;padding:0 13px!important;font-size:.94rem!important;} .main-title,.hero-title{font-size:clamp(3rem,17vw,4.4rem)!important;letter-spacing:-.07em!important;line-height:.92!important;} .hero,.hero-card,.landing-hero{padding:24px!important;border-radius:28px!important;} .hero-tagline,.hero-lead,.hero-copy{font-size:clamp(1.18rem,6vw,1.7rem)!important;line-height:1.35!important;} .launch-row,.branch-grid,.cards-grid{grid-template-columns:1fr!important;gap:16px!important;} .launch-card,.branch-card,.mode-card{min-height:auto!important;padding:22px!important;border-radius:26px!important;} .launch-title,.branch-card h2,.mode-card h2{font-size:clamp(2rem,10vw,3rem)!important;line-height:1!important;} } /* Practice pages on phones: keep the trainer card usable and stop the modifier bar creating horizontal scroll. */ @media (max-width: 760px){ .practice-card,.trainer-card,.game-card,.quiz-card,.main-card{ width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important; padding:clamp(22px,6vw,34px)!important;border-radius:30px!important;min-height:auto!important; } .practice-card h1,.trainer-card h1,.game-card h1,.quiz-card h1,.main-card h1{ font-size:clamp(2.3rem,11vw,4rem)!important;line-height:1.02!important; } .score-row,.stats-row,.session-stats,.score-pills,.session-metrics{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important;max-width:100%!important; } .score-pill,.stat-pill,.metric-pill,.session-stat,.session-metric{ width:100%!important;min-width:0!important;height:auto!important;min-height:50px!important;padding:10px 12px!important; display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;white-space:normal!important;line-height:1.15!important; } .kana-display,.prompt,.question,.kana-big{font-size:clamp(5rem,30vw,9rem)!important;line-height:1!important;} input[type="text"],input[type="search"],textarea{font-size:16px!important;max-width:100%!important;} .modifier-toggle,.modifiers-toggle,#modifierToggle,.modifiers-header{ width:100%!important;left:auto!important;right:auto!important;max-width:100%!important;overflow:hidden!important; } body{overflow-x:hidden!important;} } /* Results/stat pages: compact cards on phones so the first screen shows useful content. */ @media (max-width: 760px){ .ma-compact-results,.ma-compact-insight-grid,.ma-kana-stat-grid,.stats-grid,.metric-grid,.results-grid{ grid-template-columns:1fr!important;gap:12px!important; } .ma-compact-results > *, .ma-compact-insight-grid > *, .ma-kana-stat, .stat-card, .metric-card{ min-height:auto!important;padding:18px!important;border-radius:24px!important; } .ma-compact-results .value,.stat-card .value,.metric-card .value{font-size:clamp(2.4rem,12vw,3.6rem)!important;line-height:1!important;} .result-hero,.results-hero,.overall-snapshot,.snapshot-card{padding:22px!important;border-radius:28px!important;} } /* iPad portrait/tablet: avoid cramped nav while keeping desktop-style cards. */ @media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait){ body{padding-left:22px!important;padding-right:22px!important;} .topbar,.branch-nav,.study-nav{width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:14px!important;padding:16px!important;} .branch-links,.study-links,.nav{width:100%!important;display:flex!important;overflow-x:auto!important;gap:10px!important;scrollbar-width:none!important;} .branch-links::-webkit-scrollbar,.study-links::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none!important;} .branch-link,.study-link,.nav-link{flex:0 0 auto!important;} .profile-trigger,.study-nav-btn.profile-trigger{margin-left:auto!important;} } /* === v2.9.7 desktop scroll restore === The mobile/iPad layout pass accidentally made some desktop pages behave like fixed viewports. Keep horizontal overflow controlled, but always allow normal vertical page scrolling. */ html, body { height: auto !important; min-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior-y: auto !important; } body { position: relative !important; } .app-shell, .shell, .wrap, main, .page, .page-shell { height: auto !important; max-height: none !important; } @media (min-width: 761px) { html, body { overflow-y: auto !important; } .topbar, .branch-nav, .study-nav { max-width: calc(100vw - 48px); } } /* === v2.9.7 mobile navigation + session stats repair === Fixes phone nav clipping/overlap and prevents hidden score pills from being forced visible. */ * { box-sizing: border-box; } @media (max-width: 760px) { html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* Keep the nav as a real card with brand/profile on row one and links below. */ .branch-nav, .study-nav, .topbar { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding: 14px !important; border-radius: 26px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; gap: 12px !important; overflow: hidden !important; align-items: center !important; } .branch-brand, .study-brand, .brand { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: calc(100vw - 150px) !important; overflow: hidden !important; } .branch-name, .study-title, .brand-name { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: clamp(18px, 5vw, 24px) !important; line-height: 1.1 !important; } .branch-mark, .study-mark, .brand-mark, .logo-mark { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 17px !important; } /* Phone links should not be hidden behind the profile avatar or clipped off-screen. */ .branch-links, .study-links, .nav { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; } .branch-link, .study-link, .nav-link { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 44px !important; padding: 0 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: clamp(14px, 4vw, 16px) !important; line-height: 1 !important; } /* Profile stays in the top-right row only. */ .branch-links > .profile-trigger, .nav > .profile-trigger, .topbar > .profile-trigger, .study-nav-btn.profile-trigger, #profileOpenBtn, #studyProfileBtn { grid-column: 2 !important; grid-row: 1 !important; position: absolute !important; top: 14px !important; right: 14px !important; width: 48px !important; height: 48px !important; min-width: 48px !important; max-width: 48px !important; padding: 0 !important; margin: 0 !important; border-radius: 999px !important; overflow: hidden !important; z-index: 6 !important; } .profile-trigger > span:not(.profile-dot), .study-nav-btn.profile-trigger > span:not(.profile-dot), #profileOpenBtn > span:not(.profile-dot), #studyProfileBtn > span:not(.profile-dot) { display: none !important; } .profile-dot, #topProfileDot, #profileDot, #studyTopProfileDot { width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 999px !important; overflow: hidden !important; } .study-nav-actions { display: contents !important; } #studyNavHideBtn, .study-nav-btn.hide { display: none !important; } /* Avoid the bottom modifier control creating sideways page scroll. */ .bottom-shell, .modifiers-shell, .modifier-panel, .bottom-shell.ma-modifiers-only { width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; overflow-x: hidden !important; } } @media (max-width: 420px) { .branch-link, .study-link, .nav-link { font-size: 14px !important; padding-left: 8px !important; padding-right: 8px !important; } .branch-brand, .study-brand, .brand { max-width: calc(100vw - 136px) !important; } } /* Hidden score pills must stay hidden. Earlier mobile CSS forced them visible. */ .score-pill[hidden], .stat-pill[hidden], .metric-pill[hidden], .session-stat[hidden], .session-metric[hidden], .score-pill[style*="display: none"], .score-pill[style*="display:none"], .stat-pill[style*="display: none"], .stat-pill[style*="display:none"], .metric-pill[style*="display: none"], .metric-pill[style*="display:none"], .session-stat[style*="display: none"], .session-stat[style*="display:none"], .session-metric[style*="display: none"], .session-metric[style*="display:none"], #endlessWrongPill[style*="display: none"], #endlessWrongPill[style*="display:none"], #dailyProgressPill[style*="display: none"], #dailyProgressPill[style*="display:none"], #testQuestionPill[style*="display: none"], #testQuestionPill[style*="display:none"], #correctPill[style*="display: none"], #correctPill[style*="display:none"], #wrongPill[style*="display: none"], #wrongPill[style*="display:none"] { display: none !important; } @media (max-width: 760px) { .scoreline, .score-row, .stats-row, .session-stats, .score-pills, .session-metrics { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; } .score-pill:not([style*="display: none"]):not([style*="display:none"]), .stat-pill:not([style*="display: none"]):not([style*="display:none"]), .metric-pill:not([style*="display: none"]):not([style*="display:none"]) { min-width: 0 !important; width: 100% !important; max-width: 100% !important; white-space: normal !important; } } /* === v2.9.7 compact mobile nav polish === Keep mobile nav usable without letting the tab buttons dominate the screen. */ @media (max-width: 760px), (max-width: 900px) and (orientation: portrait) { .topbar, .branch-nav, .study-nav { width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; margin: 10px auto 14px !important; padding: 10px !important; border-radius: 22px !important; gap: 8px 9px !important; min-height: 0 !important; } .brand, .branch-brand, .study-brand { gap: 9px !important; max-width: calc(100vw - 116px) !important; } .brand-mark, .branch-mark, .study-mark { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 15px !important; font-size: 1.05rem !important; } .brand-name, .branch-name, .study-title { font-size: clamp(0.98rem, 4.3vw, 1.2rem) !important; line-height: 1.05 !important; letter-spacing: -0.035em !important; } .nav, .branch-links, .study-links { gap: 6px !important; padding: 1px 0 0 !important; margin-top: 2px !important; } .nav-link, .branch-link, .study-link, .study-nav-btn.hide { height: 36px !important; min-height: 36px !important; min-width: 0 !important; padding: 0 10px !important; border-radius: 999px !important; font-size: clamp(0.78rem, 3.2vw, 0.92rem) !important; line-height: 1 !important; letter-spacing: -0.02em !important; } .profile-trigger, .branch-links > .profile-trigger, .nav > .profile-trigger, .study-nav-btn.profile-trigger, #profileOpenBtn, #studyProfileBtn { top: 10px !important; right: 10px !important; width: 46px !important; height: 46px !important; min-width: 46px !important; max-width: 46px !important; padding: 0 !important; } .profile-dot, #topProfileDot, #profileDot, #studyTopProfileDot { width: 36px !important; height: 36px !important; min-width: 36px !important; } } @media (max-width: 430px) { .topbar, .branch-nav, .study-nav { width: calc(100vw - 22px) !important; max-width: calc(100vw - 22px) !important; padding: 9px !important; border-radius: 20px !important; } .nav-link, .branch-link, .study-link, .study-nav-btn.hide { height: 32px !important; min-height: 32px !important; padding: 0 8px !important; font-size: 0.78rem !important; } .brand-mark, .branch-mark, .study-mark { width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 14px !important; } .profile-trigger, .branch-links > .profile-trigger, .nav > .profile-trigger, .study-nav-btn.profile-trigger, #profileOpenBtn, #studyProfileBtn { width: 42px !important; height: 42px !important; min-width: 42px !important; max-width: 42px !important; } .profile-dot, #topProfileDot, #profileDot, #studyTopProfileDot { width: 32px !important; height: 32px !important; min-width: 32px !important; } } /* === v2.9.7 achievements, mastery map, profile polish, session controls === */ .profile-drawer .ma-save-section, .profile-drawer .ma-settings-panel, .profile-drawer .ma-qol-section, #profileDrawer .ma-save-section, #profileDrawer .ma-settings-panel, #profileDrawer .ma-qol-section{ margin-top:18px;padding:18px;border:1px solid rgba(148,163,184,.22);border-radius:24px;background:rgba(15,23,42,.46); } .profile-drawer .ma-save-title, .profile-drawer .ma-settings-title, .profile-drawer .ma-qol-title, #profileDrawer .ma-save-title, #profileDrawer .ma-settings-title, #profileDrawer .ma-qol-title{ font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted,#94a3b8);font-weight:900;margin-bottom:12px; } .profile-drawer .ma-profile-action{width:100%;justify-content:center;} .ma-feature-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:clamp(16px,3vw,40px);} .ma-feature-modal.open{display:flex;} .ma-feature-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(14px);} .ma-feature-panel{position:relative;width:min(1120px,96vw);max-height:min(86vh,920px);overflow:auto;border-radius:34px;border:1px solid rgba(148,163,184,.28);background:linear-gradient(145deg,rgba(15,23,42,.98),rgba(17,24,39,.96));box-shadow:0 28px 90px rgba(0,0,0,.45);} .ma-feature-content{padding:clamp(20px,4vw,42px);} .ma-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;} .ma-modal-head h2{font-size:clamp(2rem,5vw,4rem);line-height:.95;margin:0;color:#fff;} .ma-modal-head p{max-width:760px;margin:10px 0 0;color:#aebbd1;font-size:1.05rem;} .ma-modal-head button{border:1px solid rgba(148,163,184,.35);background:rgba(30,41,59,.7);color:#fff;border-radius:999px;padding:12px 18px;font-weight:900;cursor:pointer;} .ma-achievement-section{margin-top:22px;padding:20px;border-radius:26px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.035);} .ma-achievement-section h3,.ma-mastery-group h3{margin:0 0 14px;color:#f8fafc;font-size:1.35rem;} .ma-achievement{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;margin:10px 0;border-radius:18px;border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.55);} .ma-achievement strong{display:block;color:#fff;font-size:1.03rem;}.ma-achievement span{display:block;color:#aebbd1;margin-top:4px;}.ma-achievement b{position:relative;z-index:1;color:#dbeafe;}.ma-achievement i{position:absolute;left:0;bottom:0;height:4px;width:var(--p);background:linear-gradient(90deg,#60a5fa,#6ee7b7);}.ma-achievement.done{border-color:rgba(74,222,128,.4);background:rgba(20,83,45,.35);}.ma-achievement.done b{color:#86efac;} .ma-mastery-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:22px;}.ma-mastery-summary span{border:1px solid rgba(148,163,184,.2);background:rgba(255,255,255,.045);border-radius:18px;padding:14px 16px;color:#aebbd1;}.ma-mastery-summary b{display:block;color:#fff;font-size:1.8rem;line-height:1.1;} .ma-mastery-group{margin-top:22px;}.ma-mastery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px;}.ma-mastery-cell{border:1px solid rgba(148,163,184,.2);border-radius:18px;min-height:74px;background:rgba(30,41,59,.64);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:default;}.ma-mastery-cell strong{font-size:1.45rem;}.ma-mastery-cell span{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#cbd5e1;font-weight:900;}.ma-mastery-cell.new{opacity:.62}.ma-mastery-cell.learning{background:rgba(146,64,14,.34);border-color:rgba(251,191,36,.35)}.ma-mastery-cell.reviewing{background:rgba(30,64,175,.35);border-color:rgba(96,165,250,.38)}.ma-mastery-cell.mastered{background:rgba(22,101,52,.45);border-color:rgba(74,222,128,.42)} .ma-mastery-open-btn{margin-top:16px;border:1px solid rgba(96,165,250,.38);background:linear-gradient(135deg,rgba(30,64,175,.55),rgba(20,83,45,.45));color:#fff;border-radius:999px;padding:14px 20px;font-weight:900;cursor:pointer;} .session-actions{gap:10px;flex-wrap:wrap;justify-content:center;}.ma-session-paused .main-card,.ma-session-paused .practice-card{outline:2px solid rgba(250,204,21,.35);}.ma-pause-overlay{position:absolute;inset:auto 18px 18px 18px;padding:14px;border-radius:18px;text-align:center;background:rgba(15,23,42,.85);border:1px solid rgba(250,204,21,.3);color:#fde68a;font-weight:900;display:none;}.ma-session-paused .ma-pause-overlay{display:block;} @media (prefers-color-scheme: light){.ma-feature-panel{background:linear-gradient(145deg,#ffffff,#eaf3ff);}.ma-modal-head h2,.ma-achievement strong,.ma-mastery-summary b,.ma-achievement-section h3,.ma-mastery-group h3{color:#071126}.ma-modal-head p,.ma-achievement span{color:#475569}.ma-achievement,.ma-achievement-section,.ma-mastery-summary span{background:rgba(255,255,255,.76);border-color:rgba(71,85,105,.18)}.ma-mastery-cell{background:#fff;color:#071126;border-color:rgba(71,85,105,.2)}.ma-mastery-cell span{color:#475569}.ma-feature-backdrop{background:rgba(226,232,240,.72)}} body.theme-light .ma-feature-panel,[data-theme="light"] .ma-feature-panel{background:linear-gradient(145deg,#ffffff,#eaf3ff);}body.theme-light .ma-modal-head h2,body.theme-light .ma-achievement strong,body.theme-light .ma-mastery-summary b,body.theme-light .ma-achievement-section h3,body.theme-light .ma-mastery-group h3,[data-theme="light"] .ma-modal-head h2,[data-theme="light"] .ma-achievement strong,[data-theme="light"] .ma-mastery-summary b,[data-theme="light"] .ma-achievement-section h3,[data-theme="light"] .ma-mastery-group h3{color:#071126}body.theme-light .ma-modal-head p,body.theme-light .ma-achievement span,[data-theme="light"] .ma-modal-head p,[data-theme="light"] .ma-achievement span{color:#475569} @media (max-width:720px){.ma-feature-panel{border-radius:24px;max-height:88vh}.ma-modal-head{flex-direction:column}.ma-modal-head h2{font-size:2.35rem}.ma-mastery-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.ma-mastery-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}.ma-mastery-cell{min-height:60px;border-radius:14px}.ma-mastery-cell strong{font-size:1.18rem}.session-actions .btn{min-width:130px;padding-inline:14px}} /* === v2.9.9 profile structure, achievement details, mastery clarity === */ .profile-drawer .ma-qol-panel, #profileDrawer .ma-qol-panel, .profile-drawer .ma-tools-panel, #profileDrawer .ma-tools-panel{ margin-top:18px!important; padding:18px!important; border:1px solid rgba(148,163,184,.24)!important; border-radius:24px!important; background:linear-gradient(180deg,rgba(30,41,59,.50),rgba(15,23,42,.34))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important; } .profile-drawer .ma-qol-grid, #profileDrawer .ma-qol-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } .profile-drawer .ma-qol-grid.three, #profileDrawer .ma-qol-grid.three{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } .profile-drawer .ma-qol-grid button, #profileDrawer .ma-qol-grid button{ min-height:46px!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; } .profile-drawer .ma-save-section, #profileDrawer .ma-save-section{ background:linear-gradient(180deg,rgba(15,23,42,.52),rgba(15,23,42,.32))!important; } .profile-drawer .ma-qol-title, #profileDrawer .ma-qol-title, .profile-drawer .ma-save-title, #profileDrawer .ma-save-title{ display:flex!important; align-items:center!important; gap:8px!important; color:#aab7ce!important; } .profile-drawer .ma-qol-title::before, #profileDrawer .ma-qol-title::before, .profile-drawer .ma-save-title::before, #profileDrawer .ma-save-title::before{ content:''; width:8px; height:8px; border-radius:999px; background:rgba(96,165,250,.72); box-shadow:0 0 18px rgba(96,165,250,.35); } .profile-drawer .ma-theme-panel .ma-qol-title::before, #profileDrawer .ma-theme-panel .ma-qol-title::before{background:rgba(250,204,21,.78);box-shadow:0 0 18px rgba(250,204,21,.28);} .profile-drawer .ma-tools-panel .ma-qol-title::before, #profileDrawer .ma-tools-panel .ma-qol-title::before{background:rgba(110,231,183,.78);box-shadow:0 0 18px rgba(110,231,183,.28);} .ma-achievement-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;} .ma-achievement-section{margin-top:0!important;padding:16px!important;border-radius:22px!important;} .ma-achievement-section h3{font-size:1rem!important;margin-bottom:10px!important;letter-spacing:.02em!important;} .ma-achievement{width:100%;appearance:none;text-align:left;cursor:pointer;padding:12px 13px!important;margin:8px 0!important;border-radius:15px!important;min-height:72px;background:rgba(15,23,42,.50);} .ma-achievement strong{font-size:.92rem!important;line-height:1.1!important;} .ma-achievement span{font-size:.78rem!important;line-height:1.25!important;} .ma-achievement b{font-size:.78rem!important;min-width:42px;text-align:right;} .ma-achievement:hover,.ma-achievement:focus-visible{border-color:rgba(125,181,255,.48)!important;transform:translateY(-1px);} .ma-achievement-detail{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin:0 0 16px;padding:14px 16px;border-radius:18px;border:1px solid rgba(125,181,255,.25);background:linear-gradient(135deg,rgba(30,64,175,.20),rgba(20,83,45,.16));} .ma-achievement-detail strong{color:#fff;font-size:1rem;white-space:nowrap;} .ma-achievement-detail span{color:#cbd5e1;line-height:1.45;} .ma-mastery-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;} .ma-mastery-legend div{padding:14px 15px;border-radius:18px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.045);} .ma-mastery-legend b{display:block;color:#fff;margin-bottom:5px;}.ma-mastery-legend span{color:#aebbd1;font-size:.88rem;line-height:1.35;} .ma-kana-pro-head .ma-mastery-open-btn{margin-top:0;align-self:flex-start;white-space:nowrap;} .ma-mastery-breakdown{grid-template-columns:repeat(4,minmax(0,1fr))!important;} html[data-ma-theme="light"] .profile-drawer .ma-qol-panel, html[data-ma-theme="light"] #profileDrawer .ma-qol-panel, html[data-ma-theme="light"] .profile-drawer .ma-tools-panel, html[data-ma-theme="light"] #profileDrawer .ma-tools-panel, html[data-ma-theme="light"] .profile-drawer .ma-save-section, html[data-ma-theme="light"] #profileDrawer .ma-save-section{ background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(237,244,255,.78))!important; border-color:rgba(71,85,105,.18)!important; } html[data-ma-theme="light"] .ma-achievement-detail, html[data-ma-theme="light"] .ma-mastery-legend div{ background:linear-gradient(135deg,rgba(219,234,254,.86),rgba(220,252,231,.62)); border-color:rgba(71,85,105,.16); } html[data-ma-theme="light"] .ma-achievement-detail strong, html[data-ma-theme="light"] .ma-mastery-legend b{color:#071126;} html[data-ma-theme="light"] .ma-achievement-detail span, html[data-ma-theme="light"] .ma-mastery-legend span{color:#334155;} @media(max-width:860px){.ma-achievement-layout{grid-template-columns:1fr}.ma-mastery-legend{grid-template-columns:1fr}.ma-mastery-breakdown{grid-template-columns:1fr!important}.ma-kana-pro-head{gap:14px}.ma-kana-pro-head .ma-mastery-open-btn{width:100%;}} @media(max-width:640px){.profile-drawer .ma-qol-grid,#profileDrawer .ma-qol-grid,.profile-drawer .ma-qol-grid.three,#profileDrawer .ma-qol-grid.three{grid-template-columns:1fr!important}.ma-achievement-detail{display:block}.ma-achievement-detail strong{display:block;margin-bottom:6px;white-space:normal}} /* === v2.9.9 profile, achievements, and Speed & Mastery polish === */ .profile-drawer .ma-theme-panel, #profileDrawer .ma-theme-panel, .profile-drawer .ma-tools-panel, #profileDrawer .ma-tools-panel, .profile-drawer .ma-save-section, #profileDrawer .ma-save-section{ position:relative!important; margin-top:14px!important; padding:16px!important; border-radius:22px!important; border:1px solid rgba(148,163,184,.16)!important; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important; } .profile-drawer .ma-qol-title, #profileDrawer .ma-qol-title, .profile-drawer .ma-save-title, #profileDrawer .ma-save-title{ margin-bottom:11px!important; padding-bottom:9px!important; border-bottom:1px solid rgba(148,163,184,.13)!important; } .profile-drawer .ma-tools-panel [data-ma-achievements-open], #profileDrawer .ma-tools-panel [data-ma-achievements-open]{display:inline-flex!important;} .profile-drawer .ma-theme-panel [data-ma-achievements-open], #profileDrawer .ma-theme-panel [data-ma-achievements-open], .profile-drawer .ma-save-section [data-ma-achievements-open], #profileDrawer .ma-save-section [data-ma-achievements-open]{display:none!important;} .ma-achievement-layout{gap:12px!important;} .ma-achievement-section{padding:14px!important;border-radius:20px!important;} .ma-achievement{display:block!important;padding:0!important;margin:7px 0!important;min-height:0!important;border-radius:14px!important;overflow:hidden!important;} .ma-ach-main{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px 12px;position:relative;z-index:1;} .ma-achievement strong{font-size:.84rem!important;letter-spacing:-.01em!important;} .ma-achievement span{font-size:.73rem!important;line-height:1.2!important;margin-top:3px!important;} .ma-achievement b{font-size:.72rem!important;min-width:34px!important;} .ma-achievement i{height:3px!important;} .ma-ach-detail-inline{display:none;padding:0 11px 12px!important;border-top:1px solid rgba(148,163,184,.12);margin-top:0!important;} .ma-achievement.open .ma-ach-detail-inline{display:block;} .ma-ach-detail-inline p{margin:10px 0 7px;color:#cbd5e1;font-size:.78rem;line-height:1.45;} .ma-ach-detail-inline small{display:inline-flex;padding:5px 8px;border-radius:999px;background:rgba(96,165,250,.13);color:#bfdbfe;font-weight:850;font-size:.7rem;} .ma-achievement::after{content:'+';position:absolute;right:12px;top:39px;color:#9fb1c8;font-weight:950;font-size:.82rem;} .ma-achievement.open::after{content:'–';} .ma-achievement-detail{display:none!important;} .ma-mastery-hero{display:grid;grid-template-columns:1.35fr .9fr;gap:12px;margin-top:14px;} .ma-mastery-hero>div{border:1px solid rgba(148,163,184,.16);border-radius:22px;padding:18px;background:radial-gradient(circle at 0% 0%,rgba(96,165,250,.12),transparent 44%),rgba(255,255,255,.045);} .ma-mastery-hero span,.ma-speed-card .label{display:block;color:var(--ma-muted,#aab4c5);font-size:11px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;} .ma-mastery-hero strong{display:block;color:#f8fafc;font-size:clamp(1.3rem,2.4vw,2.05rem);line-height:1.05;letter-spacing:-.04em;} .ma-mastery-hero small{display:block;color:var(--ma-muted,#aab4c5);font-weight:750;line-height:1.4;margin-top:10px;} .ma-meter{height:7px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;margin-top:10px;} .ma-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#60a5fa,#6ee7b7);} .ma-speed-card{min-height:128px!important;} html[data-ma-theme="light"] .profile-drawer .ma-theme-panel, html[data-ma-theme="light"] #profileDrawer .ma-theme-panel, html[data-ma-theme="light"] .profile-drawer .ma-tools-panel, html[data-ma-theme="light"] #profileDrawer .ma-tools-panel, html[data-ma-theme="light"] .profile-drawer .ma-save-section, html[data-ma-theme="light"] #profileDrawer .ma-save-section, html[data-ma-theme="light"] .ma-mastery-hero>div{ background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(235,244,255,.86))!important; border-color:rgba(31,44,71,.16)!important; box-shadow:0 16px 44px rgba(37,52,82,.10)!important; } html[data-ma-theme="light"] .ma-mastery-hero strong{color:#071126!important;} html[data-ma-theme="light"] .ma-mastery-hero small, html[data-ma-theme="light"] .ma-ach-detail-inline p{color:#334155!important;} html[data-ma-theme="light"] .ma-ach-detail-inline small{background:rgba(37,99,235,.10);color:#1d4ed8;} html[data-ma-theme="light"] .ma-achievement::after{color:#475569;} @media(max-width:900px){.ma-mastery-hero{grid-template-columns:1fr}.ma-achievement-layout{grid-template-columns:1fr!important;}} @media(max-width:640px){.ma-ach-main{padding:9px 10px 11px}.ma-achievement strong{font-size:.82rem!important}.ma-achievement span{font-size:.72rem!important}.ma-mastery-hero>div{padding:15px}.ma-speed-card{min-height:112px!important;}} /* === v2.10.8 achievement tile redesign === */ .ma-ach-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 18px;} .ma-ach-overview>div{border:1px solid rgba(148,163,184,.16);border-radius:20px;padding:14px 15px;background:linear-gradient(135deg,rgba(96,165,250,.12),rgba(110,231,183,.075));} .ma-ach-overview b{display:block;color:#f8fafc;font-size:1.45rem;line-height:1;font-weight:950;letter-spacing:-.04em;} .ma-ach-overview span{display:block;margin-top:5px;color:#aab7ce;font-size:.78rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;} .ma-achievement-layout{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;} .ma-achievement-section{padding:16px!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;border:1px solid rgba(148,163,184,.16)!important;} .ma-ach-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;padding-bottom:10px;border-bottom:1px solid rgba(148,163,184,.12);} .ma-ach-section-head h3{margin:0!important;color:#f8fafc!important;font-size:1rem!important;} .ma-ach-section-head span{color:#9fb0c8;font-size:.78rem;font-weight:850;} .ma-achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px;} .ma-achievement-tile{position:relative;appearance:none;border:1px solid rgba(148,163,184,.18);background:radial-gradient(circle at 25% 0%,rgba(96,165,250,.13),transparent 42%),linear-gradient(180deg,rgba(15,23,42,.74),rgba(15,23,42,.46));border-radius:20px;min-height:126px;aspect-ratio:1/1;padding:12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.16);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;} .ma-achievement-tile:hover,.ma-achievement-tile:focus-visible{transform:translateY(-2px);border-color:rgba(125,181,255,.55);box-shadow:0 18px 42px rgba(0,0,0,.22);outline:none;} .ma-achievement-tile.done{background:radial-gradient(circle at 24% 0%,rgba(110,231,183,.22),transparent 45%),linear-gradient(180deg,rgba(20,83,45,.68),rgba(15,23,42,.56));border-color:rgba(110,231,183,.42);} .ma-achievement-tile strong{display:block;color:#f8fafc!important;font-size:.92rem!important;line-height:1.05!important;letter-spacing:-.02em!important;margin:0 0 2px!important;} .ma-achievement-tile em{position:absolute;top:11px;left:11px;font-style:normal;color:#dbeafe;background:rgba(96,165,250,.16);border:1px solid rgba(147,197,253,.18);padding:4px 7px;border-radius:999px;font-size:.68rem;font-weight:950;letter-spacing:.06em;text-transform:uppercase;} .ma-achievement-tile small{display:block;color:#aebbd0!important;font-size:.73rem!important;font-weight:800;line-height:1.2!important;padding-right:0;margin-top:4px;} .ma-ach-status{position:absolute;top:10px;right:10px;color:#bfdbfe!important;background:rgba(15,23,42,.54);border:1px solid rgba(148,163,184,.16);border-radius:999px;padding:4px 7px;font-size:.66rem!important;font-weight:950;} .ma-achievement-tile.done .ma-ach-status{color:#dcfce7!important;background:rgba(20,83,45,.58);border-color:rgba(110,231,183,.25);} .ma-achievement-tile i{position:absolute;left:12px;right:12px;bottom:10px;height:4px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;} .ma-achievement-tile i b{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#60a5fa,#6ee7b7);} .ma-achievement-tile::after{display:none!important;content:none!important;} .ma-ach-detail-inline,.ma-achievement.open .ma-ach-detail-inline{display:none!important;} .ma-ach-info{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:18px;} .ma-ach-info.open{display:flex;} .ma-ach-info-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.62);backdrop-filter:blur(10px);} .ma-ach-info-panel{position:relative;width:min(460px,calc(100vw - 28px));border-radius:28px;border:1px solid rgba(148,163,184,.22);background:radial-gradient(circle at 10% 0%,rgba(96,165,250,.18),transparent 42%),linear-gradient(145deg,#111827,#0b1020);box-shadow:0 30px 90px rgba(0,0,0,.40);padding:24px;} .ma-ach-info-close{position:absolute;right:16px;top:16px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.06);color:#e5edf8;border-radius:999px;padding:8px 11px;font-weight:850;cursor:pointer;} .ma-ach-info-kicker{display:inline-flex;margin-bottom:12px;border-radius:999px;background:rgba(96,165,250,.15);color:#bfdbfe;padding:6px 10px;font-weight:950;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;} .ma-ach-info-body h3{margin:0;color:#fff;font-size:1.65rem;letter-spacing:-.045em;line-height:1;} .ma-ach-info-body h3 em{font-style:normal;color:#93c5fd;font-size:1rem;vertical-align:middle;margin-left:6px;} .ma-ach-info-body p{color:#cbd5e1;line-height:1.55;margin:14px 0 18px;} .ma-ach-info-progress{border:1px solid rgba(148,163,184,.16);border-radius:18px;padding:14px;background:rgba(255,255,255,.045);} .ma-ach-info-progress strong{color:#f8fafc;}.ma-ach-info-progress span{float:right;color:#aebbd0;font-weight:850;}.ma-ach-info-progress i{display:block;clear:both;margin-top:10px;height:7px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;}.ma-ach-info-progress i b{display:block;height:100%;background:linear-gradient(90deg,#60a5fa,#6ee7b7);border-radius:999px;} html[data-ma-theme="light"] .ma-ach-overview>div,html[data-ma-theme="light"] .ma-achievement-section{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(235,244,255,.84))!important;border-color:rgba(31,44,71,.16)!important;box-shadow:0 16px 44px rgba(37,52,82,.10)!important;} html[data-ma-theme="light"] .ma-ach-overview b,html[data-ma-theme="light"] .ma-ach-section-head h3{color:#071126!important;}html[data-ma-theme="light"] .ma-ach-overview span,html[data-ma-theme="light"] .ma-ach-section-head span{color:#475569!important;} html[data-ma-theme="light"] .ma-achievement-tile{background:radial-gradient(circle at 20% 0%,rgba(37,99,235,.16),transparent 42%),linear-gradient(180deg,#ffffff,#eaf3ff);border-color:rgba(37,99,235,.14);box-shadow:0 14px 34px rgba(37,52,82,.12);} html[data-ma-theme="light"] .ma-achievement-tile.done{background:radial-gradient(circle at 20% 0%,rgba(16,185,129,.20),transparent 44%),linear-gradient(180deg,#ffffff,#e7fff4);border-color:rgba(16,185,129,.22);} html[data-ma-theme="light"] .ma-achievement-tile strong{color:#071126!important;}html[data-ma-theme="light"] .ma-achievement-tile small{color:#334155!important;}html[data-ma-theme="light"] .ma-achievement-tile em{background:rgba(37,99,235,.10);color:#1d4ed8;border-color:rgba(37,99,235,.12);}html[data-ma-theme="light"] .ma-ach-status{background:rgba(255,255,255,.76);color:#1d4ed8!important;border-color:rgba(37,99,235,.13);}html[data-ma-theme="light"] .ma-achievement-tile.done .ma-ach-status{color:#047857!important;background:rgba(236,253,245,.88);} html[data-ma-theme="light"] .ma-ach-info-panel{background:radial-gradient(circle at 10% 0%,rgba(37,99,235,.16),transparent 42%),linear-gradient(145deg,#ffffff,#edf5ff);border-color:rgba(31,44,71,.16);box-shadow:0 30px 80px rgba(37,52,82,.20);}html[data-ma-theme="light"] .ma-ach-info-close{background:rgba(15,23,42,.06);color:#0f172a;}html[data-ma-theme="light"] .ma-ach-info-body h3,html[data-ma-theme="light"] .ma-ach-info-progress strong{color:#071126;}html[data-ma-theme="light"] .ma-ach-info-body p,html[data-ma-theme="light"] .ma-ach-info-progress span{color:#334155;}html[data-ma-theme="light"] .ma-ach-info-progress{background:rgba(255,255,255,.72);border-color:rgba(31,44,71,.13);} @media(max-width:760px){.ma-ach-overview{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ma-ach-overview>div{padding:11px}.ma-ach-overview b{font-size:1.15rem}.ma-ach-overview span{font-size:.66rem}.ma-achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.ma-achievement-tile{min-height:112px;border-radius:17px;padding:10px}.ma-achievement-tile strong{font-size:.82rem!important}.ma-achievement-tile small{font-size:.68rem!important}.ma-ach-status{font-size:.6rem!important;padding:3px 6px}.ma-achievement-tile em{font-size:.61rem;padding:3px 6px}.ma-ach-info-panel{border-radius:24px;padding:22px 18px}.ma-ach-info-body h3{font-size:1.35rem}} /* === v2.10.8 achievement readability + unlock toast polish === */ .ma-achievement-grid{grid-template-columns:repeat(auto-fill,minmax(142px,1fr))!important;gap:12px!important;} .ma-achievement-tile{min-height:142px!important;padding:14px!important;border-radius:22px!important;} .ma-achievement-tile strong{font-size:1.08rem!important;line-height:1.08!important;letter-spacing:-.025em!important;} .ma-achievement-tile small{font-size:.82rem!important;line-height:1.24!important;font-weight:850!important;} .ma-achievement-tile em{font-size:.76rem!important;padding:5px 8px!important;} .ma-ach-status{font-size:.74rem!important;padding:5px 8px!important;} .ma-achievement-tile i{height:5px!important;left:14px!important;right:14px!important;bottom:12px!important;} @media(max-width:760px){ .ma-achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;} .ma-achievement-tile{min-height:128px!important;padding:12px!important;border-radius:18px!important;} .ma-achievement-tile strong{font-size:.98rem!important;line-height:1.08!important;} .ma-achievement-tile small{font-size:.76rem!important;line-height:1.22!important;} .ma-achievement-tile em{font-size:.68rem!important;padding:4px 7px!important;} .ma-ach-status{font-size:.66rem!important;padding:4px 7px!important;} } @media(max-width:380px){ .ma-achievement-tile{min-height:118px!important;padding:10px!important;} .ma-achievement-tile strong{font-size:.92rem!important;} .ma-achievement-tile small{font-size:.70rem!important;} } /* === v2.10.8 achievement tile text correction === Keep the compact square tile sizing from v2.10.0, but increase the readable text. */ .ma-achievement-grid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr))!important;gap:10px!important;} .ma-achievement-tile{min-height:126px!important;aspect-ratio:1/1!important;padding:11px!important;border-radius:20px!important;} .ma-achievement-tile strong{font-size:1.02rem!important;line-height:1.07!important;letter-spacing:-.03em!important;} .ma-achievement-tile small{font-size:.78rem!important;line-height:1.18!important;font-weight:850!important;margin-top:3px!important;} .ma-achievement-tile em{font-size:.68rem!important;padding:4px 7px!important;} .ma-ach-status{font-size:.66rem!important;padding:4px 7px!important;} .ma-achievement-tile i{height:4px!important;left:12px!important;right:12px!important;bottom:10px!important;} @media(max-width:760px){ .ma-achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;} .ma-achievement-tile{min-height:112px!important;padding:9px!important;border-radius:17px!important;} .ma-achievement-tile strong{font-size:.94rem!important;line-height:1.07!important;} .ma-achievement-tile small{font-size:.71rem!important;line-height:1.16!important;} .ma-achievement-tile em{font-size:.61rem!important;padding:3px 6px!important;} .ma-ach-status{font-size:.60rem!important;padding:3px 6px!important;} } @media(max-width:380px){ .ma-achievement-tile{min-height:108px!important;padding:8px!important;} .ma-achievement-tile strong{font-size:.88rem!important;} .ma-achievement-tile small{font-size:.66rem!important;} } /* === v2.10.8 achievement tile visual polish === */ .ma-achievement-tile{ --ma-ach-accent:96,165,250; position:relative!important; isolation:isolate; overflow:hidden!important; min-height:138px!important; padding:14px!important; border-radius:24px!important; background: radial-gradient(circle at 18% 10%, rgba(var(--ma-ach-accent),.20), transparent 34%), linear-gradient(180deg, rgba(15,23,42,.82), rgba(15,23,42,.60))!important; border:1px solid rgba(var(--ma-ach-accent),.24)!important; box-shadow:0 16px 42px rgba(0,0,0,.18)!important; } .ma-achievement-tile::before{ content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,.05), transparent 44%), radial-gradient(circle at 78% 70%, rgba(var(--ma-ach-accent),.15), transparent 30%); pointer-events:none; z-index:0; } .ma-achievement-tile.branch-general{--ma-ach-accent:245,195,93;} .ma-achievement-tile.branch-kana{--ma-ach-accent:80,220,155;} .ma-achievement-tile.branch-wordbank{--ma-ach-accent:96,165,250;} .ma-achievement-tile.done{ background: radial-gradient(circle at 18% 10%, rgba(110,231,183,.26), transparent 34%), linear-gradient(180deg, rgba(20,83,45,.72), rgba(15,23,42,.60))!important; border-color:rgba(110,231,183,.36)!important; } .ma-ach-status, .ma-achievement-tile strong, .ma-achievement-tile em, .ma-achievement-tile small, .ma-achievement-tile i{position:relative;z-index:1;} .ma-ach-status{backdrop-filter:blur(8px);} .ma-achievement-tile .ma-ach-graphic{ position:absolute; right:14px; top:42px; z-index:0; font-size:3.4rem; line-height:1; font-weight:900; letter-spacing:-.05em; color:rgba(255,255,255,.11); text-shadow:0 10px 28px rgba(0,0,0,.12); pointer-events:none; user-select:none; } .ma-achievement-tile.done .ma-ach-graphic{color:rgba(236,253,245,.18);} .ma-achievement-tile strong{ margin-top:auto!important; padding-right:54px!important; font-size:1.02rem!important; line-height:1.06!important; } .ma-achievement-tile small{ min-height:2.45em; padding-right:36px!important; margin-top:5px!important; color:#b9c7db!important; } .ma-achievement-tile em{z-index:2!important;} .ma-achievement-tile i{left:14px!important;right:14px!important;bottom:12px!important;height:5px!important;} .ma-ach-info-hero{ display:flex; align-items:center; gap:14px; margin-bottom:12px; padding:14px 16px; border-radius:22px; border:1px solid rgba(var(--ma-ach-accent,96,165,250),.18); background:linear-gradient(135deg, rgba(var(--ma-ach-accent,96,165,250),.15), rgba(255,255,255,.04)); } .ma-ach-info-symbol{ width:56px; height:56px; border-radius:18px; display:grid; place-items:center; flex:0 0 56px; background:rgba(var(--ma-ach-accent,96,165,250),.18); border:1px solid rgba(var(--ma-ach-accent,96,165,250),.18); color:#fff; font-size:1.65rem; font-weight:950; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); } .ma-ach-info-hero.done .ma-ach-info-symbol{background:rgba(110,231,183,.18);border-color:rgba(110,231,183,.24);color:#ecfdf5;} .ma-ach-info-hero .ma-ach-info-kicker{margin-bottom:8px;} .ma-ach-info-hero h3{margin:0;} html[data-ma-theme="light"] .ma-achievement-tile{ background: radial-gradient(circle at 18% 10%, rgba(var(--ma-ach-accent),.12), transparent 34%), linear-gradient(180deg,#ffffff,#edf5ff)!important; border-color:rgba(var(--ma-ach-accent),.20)!important; box-shadow:0 14px 34px rgba(37,52,82,.12)!important; } html[data-ma-theme="light"] .ma-achievement-tile.done{ background: radial-gradient(circle at 18% 10%, rgba(16,185,129,.16), transparent 34%), linear-gradient(180deg,#ffffff,#ecfff5)!important; border-color:rgba(16,185,129,.24)!important; } html[data-ma-theme="light"] .ma-achievement-tile .ma-ach-graphic{color:rgba(15,23,42,.10);} html[data-ma-theme="light"] .ma-achievement-tile.done .ma-ach-graphic{color:rgba(4,120,87,.16);} html[data-ma-theme="light"] .ma-achievement-tile small{color:#42546c!important;} html[data-ma-theme="light"] .ma-ach-info-hero{background:linear-gradient(135deg, rgba(var(--ma-ach-accent,96,165,250),.12), rgba(255,255,255,.66));border-color:rgba(var(--ma-ach-accent,96,165,250),.18);} html[data-ma-theme="light"] .ma-ach-info-symbol{color:#071126;background:rgba(var(--ma-ach-accent,96,165,250),.12);} @media(max-width:760px){ .ma-achievement-tile{min-height:126px!important;padding:11px!important;border-radius:20px!important;} .ma-achievement-tile .ma-ach-graphic{font-size:2.8rem;top:39px;right:12px;} .ma-achievement-tile strong{font-size:.96rem!important;padding-right:44px!important;} .ma-achievement-tile small{font-size:.72rem!important;padding-right:24px!important;} } @media(max-width:520px){ .ma-achievement-tile{min-height:118px!important;padding:10px!important;} .ma-achievement-tile .ma-ach-graphic{font-size:2.55rem;top:38px;right:10px;} .ma-achievement-tile strong{font-size:.92rem!important;padding-right:38px!important;} .ma-achievement-tile small{font-size:.68rem!important;min-height:2.25em;} } /* === v2.10.8 achievement tile declutter === */ .ma-achievement-tile em, .ma-ach-status{ background:transparent!important; border:none!important; box-shadow:none!important; backdrop-filter:none!important; border-radius:0!important; padding:0!important; } .ma-achievement-tile em{ top:84px!important; left:14px!important; color:rgba(226,232,240,.92)!important; font-size:.9rem!important; font-weight:900!important; letter-spacing:.02em!important; text-transform:none!important; text-shadow:0 1px 10px rgba(0,0,0,.18); } .ma-ach-status{ top:14px!important; left:14px!important; right:auto!important; color:rgba(241,245,249,.96)!important; font-size:.72rem!important; font-weight:900!important; letter-spacing:.01em!important; text-shadow:0 1px 10px rgba(0,0,0,.18); } .ma-achievement-tile strong{ margin-top:42px!important; } .ma-achievement-tile.done .ma-ach-status{ color:#dcfce7!important; } html[data-ma-theme="light"] .ma-achievement-tile em{ color:#334155!important; text-shadow:none!important; } html[data-ma-theme="light"] .ma-ach-status{ color:#0f172a!important; text-shadow:none!important; } html[data-ma-theme="light"] .ma-achievement-tile.done .ma-ach-status{ color:#047857!important; } @media(max-width:760px){ .ma-ach-status{top:12px!important;left:12px!important;font-size:.66rem!important;} .ma-achievement-tile em{top:76px!important;left:12px!important;font-size:.8rem!important;} .ma-achievement-tile strong{margin-top:36px!important;} } @media(max-width:520px){ .ma-ach-status{font-size:.62rem!important;} .ma-achievement-tile em{top:72px!important;font-size:.76rem!important;} .ma-achievement-tile strong{margin-top:34px!important;} } /* === v2.10.8 achievement status and progress polish === */ .ma-ach-status{ top:12px!important; left:12px!important; right:auto!important; display:inline-flex!important; align-items:center!important; min-height:26px!important; max-width:calc(100% - 24px)!important; padding:5px 10px!important; border-radius:999px!important; background:rgba(15,23,42,.56)!important; border:1px solid rgba(148,163,184,.18)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important; backdrop-filter:blur(8px)!important; -webkit-backdrop-filter:blur(8px)!important; color:rgba(241,245,249,.96)!important; font-size:.68rem!important; line-height:1!important; font-weight:950!important; letter-spacing:.01em!important; text-shadow:none!important; white-space:nowrap!important; } .ma-achievement-tile.done .ma-ach-status{ background:rgba(20,83,45,.56)!important; border-color:rgba(110,231,183,.26)!important; color:#dcfce7!important; } .ma-achievement-tile i{ display:block!important; opacity:1!important; visibility:visible!important; } .ma-achievement-tile i b{ min-width:8px; } html[data-ma-theme="light"] .ma-ach-status{ background:rgba(255,255,255,.82)!important; border:1px solid rgba(37,99,235,.14)!important; color:#1d4ed8!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important; } html[data-ma-theme="light"] .ma-achievement-tile.done .ma-ach-status{ background:rgba(236,253,245,.90)!important; border-color:rgba(16,185,129,.18)!important; color:#047857!important; } @media(max-width:760px){ .ma-ach-status{top:10px!important;left:10px!important;min-height:24px!important;padding:4px 9px!important;font-size:.62rem!important;} } @media(max-width:520px){ .ma-ach-status{font-size:.60rem!important;max-width:calc(100% - 20px)!important;} } /* === v2.10.8 achievement percentage meter cleanup === */ .ma-ach-status{display:none!important;} .ma-ach-meter, .ma-achievement-tile strong, .ma-achievement-tile em, .ma-achievement-tile small, .ma-achievement-tile i{position:relative;z-index:1;} .ma-ach-meter{ position:relative!important; display:block!important; width:100%!important; height:38px!important; margin:0 0 12px!important; border-radius:999px!important; overflow:hidden!important; border:1px solid rgba(148,163,184,.18)!important; background:rgba(15,23,42,.38)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important; } .ma-ach-meter-fill{ position:absolute!important; left:0!important;top:0!important;bottom:0!important; width:0; border-radius:999px!important; background:linear-gradient(90deg, rgba(var(--ma-ach-accent,96,165,250),.90), rgba(110,231,183,.92))!important; box-shadow:0 0 24px rgba(var(--ma-ach-accent,96,165,250),.16)!important; } .ma-ach-meter-label{ position:absolute!important; left:12px!important; top:50%!important; transform:translateY(-50%)!important; display:inline-block!important; color:#e5eefb!important; font-size:.84rem!important; line-height:1!important; font-weight:950!important; letter-spacing:-.015em!important; text-shadow:none!important; white-space:nowrap!important; } .ma-achievement-tile strong{margin-top:0!important;} .ma-achievement-tile em{top:auto!important;left:auto!important;right:auto!important;margin:0 0 8px!important;padding:0!important;border:none!important;background:none!important;color:#cbd5e1!important;box-shadow:none!important;} .ma-achievement-tile.done em{color:#dcfce7!important;} html[data-ma-theme="light"] .ma-ach-meter{background:rgba(226,232,240,.74)!important;border-color:rgba(37,99,235,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;} html[data-ma-theme="light"] .ma-ach-meter-fill{background:linear-gradient(90deg, rgba(var(--ma-ach-accent,37,99,235),.88), rgba(16,185,129,.80))!important;box-shadow:0 0 18px rgba(var(--ma-ach-accent,37,99,235),.10)!important;} html[data-ma-theme="light"] .ma-ach-meter-label{color:#0f172a!important;} html[data-ma-theme="light"] .ma-achievement-tile em{color:#3f4c63!important;} html[data-ma-theme="light"] .ma-achievement-tile.done em{color:#047857!important;} @media(max-width:760px){ .ma-ach-meter{height:34px!important;margin-bottom:10px!important;} .ma-ach-meter-label{left:10px!important;font-size:.76rem!important;} .ma-achievement-tile em{margin-bottom:7px!important;font-size:.72rem!important;} } @media(max-width:520px){ .ma-ach-meter{height:30px!important;margin-bottom:8px!important;} .ma-ach-meter-label{left:9px!important;font-size:.70rem!important;} .ma-achievement-tile em{font-size:.66rem!important;} } /* === v2.10.8 achievement tile meter + detail modal repair === */ .ma-achievement-tile{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:0!important;overflow:hidden!important;} .ma-ach-topline{position:relative!important;z-index:2!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;margin:0 0 10px!important;min-height:18px!important;} .ma-ach-status,.ma-ach-status-text{display:block!important;} .ma-ach-status-text{ color:rgba(241,245,249,.92)!important; font-size:.82rem!important; line-height:1!important; font-weight:900!important; letter-spacing:.01em!important; text-shadow:none!important; } .ma-achievement-tile.done .ma-ach-status-text{color:#dcfce7!important;} .ma-achievement-tile strong{ position:relative!important; z-index:2!important; margin:0 0 4px!important; padding-right:78px!important; font-size:1.02rem!important; line-height:1.02!important; } .ma-achievement-tile em{ position:relative!important; z-index:2!important; top:auto!important;left:auto!important;right:auto!important; margin:0 0 8px!important; padding:0!important; border:none!important; background:none!important; box-shadow:none!important; color:#cbd5e1!important; font-size:.90rem!important; font-weight:900!important; line-height:1!important; text-transform:none!important; } .ma-achievement-tile small{ position:relative!important;z-index:2!important; min-height:0!important; margin:0 0 12px!important; padding-right:84px!important; color:#c7d2e3!important; font-size:.80rem!important; line-height:1.2!important; } .ma-achievement-tile .ma-ach-graphic{top:36px!important;right:16px!important;font-size:3.2rem!important;opacity:.9!important;} .ma-ach-meter{ position:relative!important; left:0!important;right:auto!important;bottom:auto!important; display:block!important; width:100%!important; height:8px!important; margin-top:auto!important; margin-bottom:0!important; border-radius:999px!important; overflow:hidden!important; border:none!important; background:rgba(100,116,139,.28)!important; box-shadow:none!important; } .ma-ach-meter-fill{ position:absolute!important;left:0!important;top:0!important;bottom:0!important; border-radius:999px!important; background:linear-gradient(90deg, rgba(96,165,250,.95), rgba(110,231,183,.95))!important; box-shadow:none!important; } .ma-ach-meter-label{display:none!important;} html[data-ma-theme="light"] .ma-ach-status-text{color:#0f172a!important;} html[data-ma-theme="light"] .ma-achievement-tile.done .ma-ach-status-text{color:#047857!important;} html[data-ma-theme="light"] .ma-achievement-tile em{color:#475569!important;} html[data-ma-theme="light"] .ma-achievement-tile small{color:#475569!important;} html[data-ma-theme="light"] .ma-ach-meter{background:rgba(148,163,184,.28)!important;} html[data-ma-theme="light"] .ma-ach-meter-fill{background:linear-gradient(90deg, rgba(59,130,246,.9), rgba(16,185,129,.85))!important;} @media(max-width:760px){ .ma-ach-topline{margin-bottom:8px!important;} .ma-ach-status-text{font-size:.72rem!important;} .ma-achievement-tile strong{font-size:.94rem!important;padding-right:56px!important;} .ma-achievement-tile em{font-size:.80rem!important;margin-bottom:7px!important;} .ma-achievement-tile small{font-size:.72rem!important;padding-right:58px!important;margin-bottom:10px!important;} .ma-achievement-tile .ma-ach-graphic{top:32px!important;right:12px!important;font-size:2.6rem!important;} } @media(max-width:520px){ .ma-ach-status-text{font-size:.68rem!important;} .ma-achievement-tile strong{font-size:.88rem!important;padding-right:44px!important;} .ma-achievement-tile em{font-size:.74rem!important;} .ma-achievement-tile small{font-size:.68rem!important;padding-right:42px!important;} .ma-achievement-tile .ma-ach-graphic{top:30px!important;right:10px!important;font-size:2.25rem!important;} } .ma-ach-info-panel{max-width:820px!important;padding:28px!important;} .ma-ach-info-body{display:flex!important;flex-direction:column!important;gap:18px!important;} .ma-ach-info-topbar{display:flex!important;align-items:flex-start!important;gap:16px!important;} .ma-ach-info-topbar .ma-ach-info-hero{flex:1 1 auto!important;margin-bottom:0!important;min-width:0!important;} .ma-ach-info-close{display:none!important;} .ma-ach-info-close-inline{ flex:0 0 auto!important; align-self:flex-start!important; border-radius:999px!important; border:1px solid rgba(148,163,184,.18)!important; background:rgba(15,23,42,.54)!important; color:#f8fafc!important; padding:12px 18px!important; font-size:1rem!important; font-weight:900!important; } .ma-ach-info-copy{margin:0!important;color:#dbe7f6!important;font-size:1.02rem!important;line-height:1.5!important;} .ma-ach-info-progress{padding:18px 20px!important;border-radius:24px!important;} .ma-ach-info-progress-row{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:16px!important;margin-bottom:12px!important;} .ma-ach-info-progress strong,.ma-ach-info-progress span{font-size:1rem!important;} .ma-ach-info-progress i{display:block!important;position:relative!important;height:12px!important;border-radius:999px!important;background:rgba(100,116,139,.25)!important;overflow:hidden!important;} .ma-ach-info-progress i b{display:block!important;height:100%!important;border-radius:999px!important;background:linear-gradient(90deg, rgba(96,165,250,.95), rgba(110,231,183,.95))!important;} html[data-ma-theme="light"] .ma-ach-info-close-inline{background:#fff!important;color:#0f172a!important;border-color:rgba(37,99,235,.14)!important;} html[data-ma-theme="light"] .ma-ach-info-copy{color:#334155!important;} html[data-ma-theme="light"] .ma-ach-info-progress i{background:rgba(148,163,184,.26)!important;} html[data-ma-theme="light"] .ma-ach-info-progress i b{background:linear-gradient(90deg, rgba(59,130,246,.9), rgba(16,185,129,.85))!important;} @media(max-width:760px){ .ma-ach-info-panel{padding:22px!important;} .ma-ach-info-topbar{flex-direction:column!important;align-items:stretch!important;gap:12px!important;} .ma-ach-info-close-inline{align-self:flex-end!important;padding:10px 16px!important;font-size:.95rem!important;} .ma-ach-info-copy{font-size:.95rem!important;} .ma-ach-info-progress{padding:16px!important;border-radius:20px!important;} } @media(max-width:520px){ .ma-ach-info-panel{padding:18px!important;} .ma-ach-info-progress-row{flex-direction:column!important;align-items:flex-start!important;gap:6px!important;} } /* v2.10.8 preset achievements restore — scoped so the main Achievements modal is untouched. */ .ma-preset-checklist .ma-preset-checklist-grid{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:22px !important; margin-top:26px !important; } .ma-preset-checklist .ma-preset-achievement-card{ min-height:230px !important; padding:28px 28px 26px !important; border-radius:26px !important; border:1px solid rgba(255,255,255,.11) !important; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028)) !important; box-sizing:border-box !important; display:block !important; overflow:hidden !important; } .ma-preset-checklist .ma-preset-achievement-card.done{ border-color:rgba(103,215,139,.55) !important; background:linear-gradient(180deg,rgba(103,215,139,.14),rgba(103,215,139,.055)) !important; } .ma-preset-checklist .ma-preset-achievement-top{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:16px !important; margin:0 0 20px !important; } .ma-preset-checklist .ma-preset-achievement-top b{ color:#f8fafc !important; font-size:1.35rem !important; line-height:1.05 !important; font-weight:950 !important; letter-spacing:-.02em !important; } .ma-preset-checklist .ma-preset-achievement-top span{ flex:0 0 auto !important; color:rgba(248,250,252,.92) !important; font-size:1.28rem !important; line-height:1 !important; font-weight:900 !important; letter-spacing:-.02em !important; } .ma-preset-checklist .ma-preset-achievement-card small{ display:block !important; margin:0 0 24px !important; color:var(--ma-muted,#aab4c5) !important; font-size:1rem !important; line-height:1.22 !important; font-weight:850 !important; max-width:92% !important; } .ma-preset-checklist .ma-preset-achievement-progress{ width:100% !important; height:14px !important; margin:0 !important; overflow:hidden !important; border-radius:999px !important; background:rgba(255,255,255,.13) !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important; } .ma-preset-checklist .ma-preset-achievement-progress span{ display:block !important; height:100% !important; border-radius:inherit !important; background:linear-gradient(90deg,#67d78b,#60a5fa) !important; } .ma-preset-checklist .ma-preset-achievement-status{ display:block !important; margin:22px 0 0 !important; color:var(--ma-muted,#aab4c5) !important; font-style:normal !important; font-size:1.08rem !important; line-height:1.1 !important; font-weight:900 !important; } html[data-ma-theme="light"] .ma-preset-checklist .ma-preset-achievement-card{ background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%) !important; color:#07111f !important; border-color:rgba(15,23,42,.16) !important; box-shadow:0 18px 44px rgba(15,23,42,.09) !important; } html[data-ma-theme="light"] .ma-preset-checklist .ma-preset-achievement-card.done{ background:rgba(21,148,93,.12) !important; border-color:rgba(21,148,93,.34) !important; color:#064e3b !important; } html[data-ma-theme="light"] .ma-preset-checklist .ma-preset-achievement-top b, html[data-ma-theme="light"] .ma-preset-checklist .ma-preset-achievement-top span{ color:#07111f !important; } html[data-ma-theme="light"] .ma-preset-checklist .ma-preset-achievement-card small, html[data-ma-theme="light"] .ma-preset-checklist .ma-preset-achievement-status{ color:#3f4d63 !important; } @media(max-width:1180px){ .ma-preset-checklist .ma-preset-checklist-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} } @media(max-width:680px){ .ma-preset-checklist .ma-preset-checklist-grid{grid-template-columns:1fr !important;gap:14px !important;} .ma-preset-checklist .ma-preset-achievement-card{min-height:0 !important;padding:22px !important;} .ma-preset-checklist .ma-preset-achievement-top b{font-size:1.16rem !important;} .ma-preset-checklist .ma-preset-achievement-top span{font-size:1.05rem !important;} .ma-preset-checklist .ma-preset-achievement-card small{font-size:.95rem !important;margin-bottom:18px !important;} .ma-preset-checklist .ma-preset-achievement-status{font-size:.98rem !important;margin-top:16px !important;} } /* v2.10.17: exact restore for Kana Home preset achievement tracker only. This is scoped to #maPresetChecklist so the Profile > Achievements modal is not touched. */ #maPresetChecklist.ma-preset-checklist{ padding:32px 30px 34px !important; } #maPresetChecklist .ma-kana-pro-head{ margin-bottom:28px !important; } #maPresetChecklist .ma-preset-checklist-grid{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:22px !important; margin-top:0 !important; } #maPresetChecklist .ma-preset-achievement-card{ display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; box-sizing:border-box !important; min-height:230px !important; height:230px !important; padding:26px 28px !important; border-radius:28px !important; gap:0 !important; border:1px solid rgba(255,255,255,.10) !important; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03)) !important; box-shadow:none !important; } #maPresetChecklist .ma-preset-achievement-card.done{ border-color:rgba(103,215,139,.55) !important; background:linear-gradient(180deg,rgba(103,215,139,.14),rgba(103,215,139,.05)) !important; } #maPresetChecklist .ma-preset-achievement-top{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:14px !important; margin:0 0 20px !important; } #maPresetChecklist .ma-preset-achievement-top b{ display:block !important; color:#f8fafc !important; font-size:1.24rem !important; line-height:1.08 !important; font-weight:950 !important; letter-spacing:-.025em !important; white-space:normal !important; } #maPresetChecklist .ma-preset-achievement-top span{ flex:0 0 auto !important; color:rgba(255,255,255,.92) !important; font-size:1.18rem !important; line-height:1 !important; font-weight:850 !important; letter-spacing:-.02em !important; white-space:nowrap !important; } #maPresetChecklist .ma-preset-achievement-card small{ display:block !important; margin:0 0 22px !important; padding:0 !important; max-width:none !important; color:var(--muted,#aab4c5) !important; font-size:1rem !important; line-height:1.28 !important; font-weight:800 !important; } #maPresetChecklist .ma-preset-achievement-progress{ width:100% !important; height:14px !important; margin:0 !important; overflow:hidden !important; border-radius:999px !important; background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important; } #maPresetChecklist .ma-preset-achievement-progress span{ display:block !important; height:100% !important; border-radius:999px !important; background:linear-gradient(90deg,#67d78b,#60a5fa) !important; } #maPresetChecklist .ma-preset-achievement-status{ display:block !important; margin:20px 0 0 !important; color:var(--muted,#aab4c5) !important; font-size:1.04rem !important; line-height:1.1 !important; font-style:normal !important; font-weight:850 !important; } html[data-ma-theme="light"] #maPresetChecklist .ma-preset-achievement-card{ background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%) !important; color:#07111f !important; border-color:rgba(15,23,42,.16) !important; box-shadow:0 18px 44px rgba(15,23,42,.09) !important; } html[data-ma-theme="light"] #maPresetChecklist .ma-preset-achievement-card.done{ background:rgba(21,148,93,.12) !important; border-color:rgba(21,148,93,.34) !important; color:#064e3b !important; } html[data-ma-theme="light"] #maPresetChecklist .ma-preset-achievement-top b, html[data-ma-theme="light"] #maPresetChecklist .ma-preset-achievement-top span{ color:#07111f !important; } html[data-ma-theme="light"] #maPresetChecklist .ma-preset-achievement-card small, html[data-ma-theme="light"] #maPresetChecklist .ma-preset-achievement-status{ color:#3f4d63 !important; } @media(max-width:1180px){ #maPresetChecklist .ma-preset-checklist-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} } @media(max-width:680px){ #maPresetChecklist .ma-preset-checklist-grid{grid-template-columns:1fr !important;} #maPresetChecklist .ma-preset-achievement-card{height:auto !important;min-height:0 !important;padding:22px !important;border-radius:24px !important;} #maPresetChecklist .ma-preset-achievement-top{margin-bottom:16px !important;} #maPresetChecklist .ma-preset-achievement-top b{font-size:1.1rem !important;} #maPresetChecklist .ma-preset-achievement-top span{font-size:1rem !important;} #maPresetChecklist .ma-preset-achievement-card small{font-size:.95rem !important;margin-bottom:18px !important;} #maPresetChecklist .ma-preset-achievement-status{font-size:.95rem !important;margin-top:16px !important;} } /* v2.10.17: exact restore of the original Kana Home preset tracker from before the Achievements modal. Scoped to #maPresetChecklist only so Profile > Achievements is untouched. */ #maPresetChecklist .ma-achievement-grid{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:12px !important; margin-top:0 !important; } #maPresetChecklist .ma-achievement-card{ border:1px solid rgba(255,255,255,.10) !important; background:rgba(255,255,255,.04) !important; border-radius:18px !important; padding:16px !important; min-height:0 !important; height:auto !important; aspect-ratio:auto !important; display:block !important; overflow:visible !important; box-shadow:none !important; } #maPresetChecklist .ma-achievement-card.done{ border-color:rgba(103,215,139,.55) !important; background:linear-gradient(180deg,rgba(103,215,139,.14),rgba(103,215,139,.05)) !important; } #maPresetChecklist .ma-achievement-top{ display:flex !important; justify-content:space-between !important; align-items:flex-start !important; gap:10px !important; margin:0 !important; font-size:18px !important; } #maPresetChecklist .ma-achievement-top b{ display:inline !important; color:#f8fafc !important; font-size:18px !important; line-height:1.15 !important; font-weight:900 !important; letter-spacing:normal !important; white-space:normal !important; } #maPresetChecklist .ma-achievement-top span{ display:inline !important; flex:0 0 auto !important; color:rgba(255,255,255,.92) !important; font-size:18px !important; line-height:1.15 !important; font-weight:400 !important; letter-spacing:normal !important; white-space:nowrap !important; } #maPresetChecklist .ma-achievement-card small{ display:block !important; margin:8px 0 12px !important; padding:0 !important; max-width:none !important; min-height:0 !important; color:var(--muted,#aab4c5) !important; font-size:14px !important; line-height:1.25 !important; font-weight:750 !important; } #maPresetChecklist .ma-progress-track{ width:100% !important; height:10px !important; margin:0 !important; overflow:hidden !important; border-radius:999px !important; background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow:none !important; } #maPresetChecklist .ma-progress-track span{ display:block !important; height:100% !important; border-radius:inherit !important; background:linear-gradient(90deg,#67d78b,#60a5fa) !important; } #maPresetChecklist .ma-achievement-card em{ display:block !important; margin-top:10px !important; color:var(--muted,#aab4c5) !important; font-style:normal !important; font-size:14px !important; line-height:1.25 !important; font-weight:800 !important; } html[data-ma-theme="light"] #maPresetChecklist .ma-achievement-card{ background:rgba(255,255,255,.76) !important; color:#071126 !important; border-color:rgba(71,85,105,.18) !important; box-shadow:none !important; } html[data-ma-theme="light"] #maPresetChecklist .ma-achievement-card.done{ background:rgba(21,148,93,.12) !important; border-color:rgba(21,148,93,.34) !important; color:#064e3b !important; } html[data-ma-theme="light"] #maPresetChecklist .ma-achievement-top b, html[data-ma-theme="light"] #maPresetChecklist .ma-achievement-top span{ color:#071126 !important; } html[data-ma-theme="light"] #maPresetChecklist .ma-achievement-card small, html[data-ma-theme="light"] #maPresetChecklist .ma-achievement-card em{ color:#475569 !important; } @media(max-width:860px){ #maPresetChecklist .ma-achievement-grid{grid-template-columns:1fr 1fr !important;} } @media(max-width:640px){ #maPresetChecklist .ma-achievement-grid{grid-template-columns:1fr !important;} } /* === v2.10.17 Profile Achievements tile text repair only === Scoped away from #maPresetChecklist so the Kana preset tracker stays unchanged. */ .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-grid{ grid-template-columns:repeat(auto-fill,minmax(154px,1fr)) !important; gap:14px !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile{ display:grid !important; grid-template-rows:auto auto auto minmax(34px,1fr) auto !important; align-content:start !important; align-items:start !important; gap:0 !important; min-height:178px !important; aspect-ratio:auto !important; padding:16px !important; border-radius:24px !important; overflow:hidden !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-ach-topline{ grid-row:1 !important; min-height:20px !important; margin:0 0 14px !important; width:100% !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-ach-status-text{ display:block !important; font-size:.82rem !important; line-height:1 !important; font-weight:900 !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile strong{ grid-row:2 !important; display:block !important; margin:0 0 6px !important; padding-right:52px !important; max-width:100% !important; font-size:1.02rem !important; line-height:1.06 !important; letter-spacing:-.025em !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile em{ grid-row:3 !important; display:block !important; position:relative !important; top:auto !important; left:auto !important; right:auto !important; margin:0 0 8px !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; font-size:.84rem !important; line-height:1 !important; font-weight:900 !important; white-space:normal !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile small{ grid-row:4 !important; display:block !important; align-self:start !important; min-height:0 !important; margin:0 0 14px !important; padding-right:34px !important; max-width:100% !important; font-size:.80rem !important; line-height:1.18 !important; font-weight:800 !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-ach-meter{ grid-row:5 !important; position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; align-self:end !important; width:100% !important; height:7px !important; margin:0 !important; border-radius:999px !important; overflow:hidden !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile .ma-ach-graphic{ top:48px !important; right:14px !important; font-size:3rem !important; opacity:.18 !important; pointer-events:none !important; } @media (min-width:1200px){ .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-grid{ grid-template-columns:repeat(auto-fill,minmax(166px,1fr)) !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile{ min-height:184px !important; } } @media (max-width:760px){ .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile{ min-height:158px !important; padding:12px !important; border-radius:20px !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-ach-topline{margin-bottom:10px !important;} .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-ach-status-text{font-size:.72rem !important;} .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile strong{font-size:.90rem !important;padding-right:38px !important;} .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile em{font-size:.74rem !important;margin-bottom:6px !important;} .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile small{font-size:.68rem !important;line-height:1.14 !important;padding-right:28px !important;margin-bottom:10px !important;} .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile .ma-ach-graphic{top:40px !important;right:9px !important;font-size:2.35rem !important;opacity:.16 !important;} } /* v2.10.17: increase achievement tile graphic visibility only. */ .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile .ma-ach-graphic{ opacity:.34 !important; } html[data-ma-theme="light"] .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile .ma-ach-graphic{ opacity:.22 !important; } @media (max-width:760px){ .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile .ma-ach-graphic{ opacity:.30 !important; } html[data-ma-theme="light"] .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile .ma-ach-graphic{ opacity:.20 !important; } } /* v2.10.17: make Profile Achievements tile graphics clearly visible only. */ .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile .ma-ach-graphic{ opacity:.62 !important; color:rgba(226,232,240,.32) !important; text-shadow:0 10px 30px rgba(0,0,0,.20) !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile.done .ma-ach-graphic{ opacity:.68 !important; color:rgba(220,252,231,.36) !important; } html[data-ma-theme="light"] .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile .ma-ach-graphic{ opacity:.52 !important; color:rgba(15,23,42,.22) !important; text-shadow:none !important; } html[data-ma-theme="light"] .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile.done .ma-ach-graphic{ opacity:.58 !important; color:rgba(4,120,87,.26) !important; } @media (max-width:760px){ .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile .ma-ach-graphic{ opacity:.56 !important; color:rgba(226,232,240,.30) !important; } .ma-feature-panel .ma-achievement-layout .ma-achievement-section .ma-achievement-tile.done .ma-ach-graphic{ opacity:.62 !important; color:rgba(220,252,231,.34) !important; } }