:root{
  --ui-bg:#fbfcfa;
  --ui-surface:#fff;
  --ui-surface-soft:#f7f9f5;
  --ui-border:#e5e8e2;
  --ui-border-strong:#d6dbd2;
  --ui-ink:#000437;
  --ui-text:#4b4b4b;
  --ui-muted:#8e948b;
  --ui-green:#58cc02;
  --ui-green-dark:#398500;
  --ui-green-soft:#eef9e8;
  --ui-danger:#ff4b4b;
  --ui-radius-card:20px;
  --ui-radius-control:14px;
  --ui-shadow:0 8px 28px rgba(0,4,55,.055);
  --ui-touch:48px;
  --brand-ink-teal:#0f5a5a;
  --brand-warm-gold:#d4a85b;
}
html{background:var(--ui-bg);scroll-behavior:smooth}
body{background:var(--ui-bg);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button,a,summary{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid rgba(88,204,2,.32);outline-offset:2px}

/* Shared surfaces and controls */
body .card,
#lessonApp .lesson-head,
#lessonApp .lesson-content{
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius-card);
  background:var(--ui-surface);
  box-shadow:var(--ui-shadow);
}
body .action,
body .option,
#lessonApp .action,
#lessonApp .option,
#lessonApp .fill-input,
body .input{
  min-height:var(--ui-touch);
  border-radius:var(--ui-radius-control);
}
body .action,#lessonApp .action{font-size:15px;font-weight:900;letter-spacing:.01em}
body .option,#lessonApp .option{font-size:15px;line-height:1.45}
body .action:active,#lessonApp .action:active{transform:translateY(1px)}
body .small,#lessonApp .lesson-question-count{color:var(--ui-muted)}

/* Homepage page-level rhythm */
body.app-nav-ready{max-width:640px;margin:0 auto;padding-top:14px}
.title{letter-spacing:-.035em}
body.app-nav-ready>.title{display:block;width:min(100%,520px);height:112px;min-height:0;margin:0 auto!important;font-size:0;color:transparent!important;background-image:url('./brand/manyingo-logo-classic.png');background-image:image-set(url('./brand/manyingo-logo-classic.webp') type('image/webp'),url('./brand/manyingo-logo-classic.png') type('image/png'));background-position:center;background-size:contain;background-repeat:no-repeat}
body.app-nav-ready>.title::after{content:none}
.status{color:var(--ui-muted)!important;margin-bottom:12px!important}
.home-view{padding-bottom:8px}
#homePath>.card,#homeWeakness>.card,#homeResults>.card{padding:20px}
#learningPath .lp-title,#weaknessPanel .weak-title,#masteryDashboard .dashboard-title{
  font-size:22px;
  line-height:1.25;
  letter-spacing:-.018em;
  color:var(--ui-ink);
}
#learningPath .lp-sub,#weaknessPanel .weak-sub,#masteryDashboard .dashboard-sub{
  color:var(--ui-muted);
  line-height:1.55;
}

/* Canonical mascot state placements */
.player-status .streak{display:inline-flex;align-items:center;gap:4px}
.player-status .streak::before{content:"";display:block;width:30px;height:40px;flex:0 0 30px;background:url('./mascot/moling-determined.svg') center/contain no-repeat}
#lessonApp .lesson-step>.lesson-icon.mascot-thinking{font-size:0;width:64px;height:82px;margin:0 auto 4px;background:url('./mascot/moling-thinking.svg') center/contain no-repeat}

/* Normalize feature cards */
#learningPath .lp-stage-card,
#weaknessPanel .weak-priority,
#masteryDashboard .dashboard-group{
  border-radius:16px;
  border-color:var(--ui-border);
  box-shadow:none;
}
#learningPath .lp-stage-card.clickable:hover,
#weaknessPanel .weak-priority:hover,
#masteryDashboard .dashboard-toggle:hover{background-color:#fbfdf9}
#weaknessPanel .weak-action,
#masteryDashboard .dashboard-kp>a{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
}
#weaknessPanel .weak-empty,
#masteryDashboard .dashboard-empty{
  margin-top:8px;
  padding:24px 16px;
  border:1px dashed var(--ui-border-strong);
  border-radius:16px;
  background:var(--ui-surface-soft);
  text-align:center;
}

/* Layered answer feedback */
body .feedback.feedback-ui,#lessonApp .feedback.feedback-ui{
  padding:0!important;
  overflow:hidden;
  border:1px solid var(--ui-border);
  background:var(--ui-surface)!important;
  color:var(--ui-text)!important;
  box-shadow:none;
}
body .feedback-ui.correct,#lessonApp .feedback-ui.correct{border-color:#b9df9d}
body .feedback-ui.wrong,#lessonApp .feedback-ui.wrong{border-color:#ffc5c5}
.feedback-result{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;padding:13px 14px}
.feedback-ui.correct .feedback-result{background:#f3fbeD}
.feedback-ui.wrong .feedback-result{background:#fff3f3}
.feedback-result-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:950}
.feedback-ui.correct .feedback-result-icon{background:var(--ui-green);color:#fff}
.feedback-ui.wrong .feedback-result-icon{background:var(--ui-danger);color:#fff}
.feedback-result-copy{min-width:0}
.feedback-result-title{display:block;color:var(--ui-ink);font-size:16px;line-height:1.25}
.feedback-answer{display:block;margin-top:3px;color:var(--ui-text);font-size:13px;font-weight:800;line-height:1.45}
.feedback-teaching{padding:13px 14px;border-top:1px solid var(--ui-border)}
.feedback-section-title{display:block;color:var(--ui-ink);font-size:12px;margin-bottom:5px}
.feedback-explanation,.feedback-note{margin:0;color:var(--ui-text);font-size:13px;line-height:1.6;font-weight:650}
.feedback-note{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--ui-surface-soft);font-size:12px;color:var(--ui-muted)}
.feedback-progress{border-top:1px solid var(--ui-border);padding:8px 14px}
.feedback-progress>summary{list-style:none;cursor:pointer;color:var(--ui-muted);font-size:11px;font-weight:900;padding:3px 0}
.feedback-progress>summary::-webkit-details-marker{display:none}
.feedback-progress>summary:after{content:' ›'}
.feedback-progress[open]>summary:after{content:'⌄';float:right}
.feedback-progress-rows{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.feedback-progress-rows span{display:inline-flex;align-items:center;min-height:28px;padding:5px 8px;border-radius:999px;background:var(--ui-surface-soft);color:var(--ui-text);font-size:11px;font-weight:800}
.feedback-next{padding:9px 14px;border-top:1px solid var(--ui-border);color:var(--ui-muted);font-size:11px;font-weight:800;background:#fcfdfb}

/* Learning session completion */
.session-summary.done{padding:10px 0 2px!important;text-align:center;font-weight:inherit}
.session-summary-icon{width:62px;height:62px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ui-green-soft);font-size:32px}
.session-summary h3{margin:0;color:var(--ui-ink);font-size:24px;line-height:1.25;letter-spacing:-.02em}
.session-summary-lead{margin:6px 0 16px;color:var(--ui-muted);font-size:13px;font-weight:800}
.session-summary-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.session-summary-metrics>div{min-width:0;padding:12px 6px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-surface-soft)}
.session-summary-metrics strong{display:block;color:var(--ui-ink);font-size:19px;line-height:1.1;white-space:nowrap}
.session-summary-metrics span{display:block;margin-top:5px;color:var(--ui-muted);font-size:9px;font-weight:850;line-height:1.25}
.session-summary-impact{text-align:left;padding:12px 13px;border-radius:14px;background:#f7fff1;border:1px solid #dcedd0}
.session-summary-impact>strong{display:block;color:var(--ui-green-dark);font-size:11px;margin-bottom:4px}
.session-summary-impact p{margin:3px 0;color:var(--ui-text);font-size:12px;font-weight:750;line-height:1.5}
.session-summary-action{margin-top:14px!important;text-decoration:none}
#lessonApp .session-summary{max-width:520px;margin:0 auto}

/* Lesson consistency */
#lessonApp{width:100%}
#lessonApp .lesson-head,#lessonApp .lesson-content{padding:20px;margin-bottom:14px}
#lessonApp .lesson-back{min-height:40px;display:inline-flex;align-items:center;padding:0 4px 8px;color:var(--ui-green-dark)}
#lessonApp .lesson-category{color:var(--ui-muted)}
#lessonApp .lesson-head h2{font-size:26px;line-height:1.25;letter-spacing:-.02em}
#lessonApp .lesson-step h3,#lessonApp .lesson-complete h3{font-size:22px;line-height:1.35}
#lessonApp .lesson-question{font-size:21px;line-height:1.55}
#lessonApp .lesson-tip,#lessonApp .lesson-examples,#lessonApp .feedback{border-radius:14px}
#lessonApp .lesson-progress{height:9px}
#lessonApp .lesson-loading,#lessonApp .lesson-error,#lessonApp .lesson-complete{padding:28px 10px}

/* Small-screen guardrails: 360–430px */
@media(max-width:430px){
  body{padding-left:12px!important;padding-right:12px!important}
  body.app-nav-ready{padding-top:8px}
  .title{font-size:0!important;margin-top:0!important}
  body.app-nav-ready>.title{width:min(100%,400px);height:86px;min-height:0;margin:0 auto!important}
  body.app-nav-ready>.title::after{content:none}
  .player-status .streak::before{width:24px;height:32px;flex-basis:24px}
  body .card{border-radius:18px}
  #homePath>.card,#homeWeakness>.card,#homeResults>.card{padding:16px}
  #learningPath .lp-title,#weaknessPanel .weak-title,#masteryDashboard .dashboard-title{font-size:20px}
  #weaknessPanel .weak-priority{padding:12px}
  #masteryDashboard .dashboard-groups{gap:8px}
  #masteryDashboard .dashboard-toggle{padding:11px}
  #lessonApp .lesson-head,#lessonApp .lesson-content{padding:16px;border-radius:18px}
  #lessonApp .lesson-head h2{font-size:23px}
  #lessonApp .lesson-question{font-size:19px}
  #lessonApp .lesson-step h3,#lessonApp .lesson-complete h3{font-size:20px}
  #lessonApp .lesson-step>.lesson-icon.mascot-thinking{width:56px;height:72px}
  #lessonApp .action,#lessonApp .option,body .action,body .option{min-height:50px}
  .feedback-result{padding:12px}.feedback-teaching{padding:12px}.feedback-progress,.feedback-next{padding-left:12px;padding-right:12px}
  .session-summary h3{font-size:22px}.session-summary-metrics>div{padding:11px 4px}.session-summary-metrics strong{font-size:17px}
}
@media(max-width:370px){
  body{padding-left:10px!important;padding-right:10px!important}
  #homePath>.card,#homeWeakness>.card,#homeResults>.card{padding:14px}
  #masteryDashboard .dashboard-hero{grid-template-columns:1fr!important;text-align:center}
  #masteryDashboard .dashboard-overall{margin:0 auto}
  #masteryDashboard .dashboard-hero-copy{text-align:center}
  #masteryDashboard .dashboard-groups{grid-template-columns:1fr!important}
  #weaknessPanel .weak-priority-top{align-items:flex-start}
  #lessonApp .lesson-head,#lessonApp .lesson-content{padding:14px}
  .feedback-result{grid-template-columns:32px minmax(0,1fr)}
  .feedback-result-icon{width:30px;height:30px;font-size:17px}
  .session-summary-metrics{gap:5px}.session-summary-metrics strong{font-size:15px}.session-summary-metrics span{font-size:8px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* Selectable interface themes */
.ui-theme-switcher{display:flex;align-items:center;justify-content:flex-end;gap:4px;width:min(100%,640px);margin:0 auto 6px;padding:0 2px;color:var(--ui-muted);font-size:11px;font-weight:850}
.ui-theme-label{margin-right:3px}
.ui-theme-choice{min-height:34px;padding:5px 10px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface);color:var(--ui-muted);font:inherit;cursor:pointer}
.ui-theme-choice.active,.ui-theme-choice[aria-pressed="true"]{border-color:var(--brand-warm-gold);background:#fff8e8;color:#70551d;box-shadow:0 0 0 1px rgba(212,168,91,.12)}
.ui-theme-choice:focus-visible{outline:3px solid rgba(212,168,91,.34);outline-offset:2px}
body.study-focus>.ui-theme-switcher{display:none}

html[data-ui-theme="ink"]{
  --green:#17666b;
  --ink:#101b35;
  --text:#3d4654;
  --gray:#7e8893;
  --red:#c65362;
  --light-green:#edf5f1;
  --light-red:#fff0f1;
  --orange:#bd8734;
  --ui-bg:#eef1f3;
  --ui-surface:#fbfcfc;
  --ui-surface-soft:#f0f3f4;
  --ui-border:#d4dce0;
  --ui-border-strong:#bcc8ce;
  --ui-ink:#101b35;
  --ui-text:#3d4654;
  --ui-muted:#77828c;
  --ui-green:#17666b;
  --ui-green-dark:#10494f;
  --ui-green-soft:#e8f1ef;
  --ui-danger:#c65362;
  --ui-shadow:0 10px 30px rgba(16,27,53,.09);
  --brand-ink-teal:#174f59;
  --brand-warm-gold:#d4a85b;
}
html[data-ui-theme="ink"],html[data-ui-theme="ink"] body{
  background:
    radial-gradient(circle at 50% -90px,rgba(212,168,91,.13),transparent 280px),
    linear-gradient(180deg,#f6f7f5 0,#eef1f3 46%,#e9edef 100%);
}
html[data-ui-theme="ink"] button:focus-visible,
html[data-ui-theme="ink"] a:focus-visible,
html[data-ui-theme="ink"] input:focus-visible,
html[data-ui-theme="ink"] summary:focus-visible{outline-color:rgba(212,168,91,.55)}
html[data-ui-theme="ink"] body .card,
html[data-ui-theme="ink"] #lessonApp .lesson-head,
html[data-ui-theme="ink"] #lessonApp .lesson-content{border-color:var(--ui-border);box-shadow:var(--ui-shadow)}
html[data-ui-theme="ink"] body.app-nav-ready>.title{background-image:url('./brand/manyingo-logo-ink.png');background-image:image-set(url('./brand/manyingo-logo-ink.webp') type('image/webp'),url('./brand/manyingo-logo-ink.png') type('image/png'))}
html[data-ui-theme="ink"] .circle{border-color:var(--brand-warm-gold);background:linear-gradient(145deg,#20344e,#17666b)}
html[data-ui-theme="ink"] .fill,
html[data-ui-theme="ink"] #lessonApp .lesson-progress div,
html[data-ui-theme="ink"] .study-progress-track i{background:linear-gradient(90deg,#174f59,#2a7b78 72%,#d4a85b)}
html[data-ui-theme="ink"] body .action,
html[data-ui-theme="ink"] #lessonApp .action{border-color:#173c50;background:linear-gradient(135deg,#20344e,#17666b);box-shadow:0 4px 0 #0d303d;color:#fff}
html[data-ui-theme="ink"] body .option,
html[data-ui-theme="ink"] #lessonApp .option{border-color:#aebbc2;background:rgba(251,252,252,.94)}
html[data-ui-theme="ink"] body .option:hover,
html[data-ui-theme="ink"] #lessonApp .option:hover{border-color:#688792;background:#f5f8f8}
html[data-ui-theme="ink"] body .option.correct,
html[data-ui-theme="ink"] #lessonApp .option.correct{border-color:#2b7774;background:#e7f3ed}
html[data-ui-theme="ink"] body .option.wrong,
html[data-ui-theme="ink"] #lessonApp .option.wrong{border-color:#c65362;background:#fff0f1}
html[data-ui-theme="ink"] .feedback-ui.correct .feedback-result{background:linear-gradient(90deg,#eef5f0,#f8f3e7)}
html[data-ui-theme="ink"] .feedback-ui.wrong .feedback-result{background:#fff1f2}
html[data-ui-theme="ink"] .feedback-ui.correct .feedback-result-icon{background:#17666b}
html[data-ui-theme="ink"] .feedback-ui.wrong .feedback-result-icon{background:#c65362}
html[data-ui-theme="ink"] .session-summary-impact{border-color:#d8c38d;background:#faf5e8}
html[data-ui-theme="ink"] .session-summary-impact>strong{color:#70551d}
html[data-ui-theme="ink"] .home-tabs.app-bottom-nav{border-color:#cbd5da;background:rgba(246,248,248,.94);box-shadow:0 12px 36px rgba(16,27,53,.18)}
html[data-ui-theme="ink"] .app-bottom-nav .home-tab.active{background:#dfeaec;color:#174f59}
html[data-ui-theme="ink"] .app-bottom-nav .home-tab.active:after{background:#d4a85b}
html[data-ui-theme="ink"] .ui-theme-choice.active,
html[data-ui-theme="ink"] .ui-theme-choice[aria-pressed="true"]{border-color:#d4a85b;background:#20344e;color:#fff4d7}
html[data-ui-theme="ink"] #lessonApp .lesson-tip{background:#faf4df;border:1px solid #e5d19e}
html[data-ui-theme="ink"] #lessonApp .lesson-examples{background:#eef2f3}
@media(max-width:430px){
  .ui-theme-switcher{margin-bottom:2px;padding-right:0}
  .ui-theme-choice{min-height:32px;padding:4px 9px}
}