/* Approved Figma direction A — native layouts with real learner data. */
:root {
  --bg:#f8faf3; --ink:#203723; --muted:#60715e; --line:#dfe7d8;
  --green:#348308; --lime:#ecf8dc; --accent:#67d817;
  --surface:#fff; --blue:#e8f2fc; --blue-ink:#2b658b;
  --orange:#78500c; --radius:24px; --shadow:none;
}
html {scroll-padding-bottom:120px}
body {background:var(--bg);font:400 16px/1.5 Golos,Arial,sans-serif;color:var(--ink)}
h1,h2,h3 {color:var(--ink);letter-spacing:-.025em}
button,input,select,textarea {font:inherit}
button,input:not([type=checkbox]):not([type=radio]),select {min-height:48px}
button,a,summary {touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {outline:3px solid #348308;outline-offset:4px}
button:disabled {cursor:not-allowed}
[hidden] {display:none!important}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shell {max-width:1220px;padding:0 32px}
.app-header {height:92px;gap:24px;background:var(--bg);border-bottom:1px solid var(--line)}
.brand {font-size:20px;font-weight:700;letter-spacing:-.03em;gap:10px;min-height:48px}
.brand small {display:none}
.brand-mark {width:42px;height:42px;background:var(--accent);border-radius:13px;box-shadow:none;flex:0 0 42px}
.brand-mark:after {width:26px;height:30.333px}
.brand-mark:has(img):after {display:none}
.brand-mark>img {display:block;width:26px;height:30.333px;object-fit:contain}
#openAwards {height:48px;width:48px;min-width:48px;flex:0 0 48px;background:#fff;border:1.5px solid var(--line);border-radius:16px;box-shadow:none}
#openAwards img {width:22px;height:22px}
#openAwards:hover {background:var(--lime);border-color:#b5d99b}
#appNav {gap:5px}
.nav-item {min-height:48px;border:0;border-radius:16px;font-size:14px;font-weight:500;padding:12px}
.nav-item.active {color:var(--green);background:var(--lime);border:0}
.nav-item.active .ui-icon {filter:invert(36%) sepia(85%) saturate(715%) hue-rotate(48deg) brightness(90%)}
.primary,.subtle,.hint-btn,.nav-button,.plan-action {min-height:56px;padding:14px 18px;font-size:16px;font-weight:600;line-height:22px;border-radius:16px}
.primary {background:var(--accent);border:0;color:var(--ink);box-shadow:0 4px 0 #348308}
.primary:hover {background:#74df28;border-color:transparent}
.primary:active {transform:translateY(3px);box-shadow:0 1px 0 #348308}
.primary .ui-icon {filter:none}
.primary:disabled {background:#e2e9da;box-shadow:none;color:var(--muted);opacity:1}
.subtle,.nav-button {background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.subtle:hover,.nav-button:hover {background:var(--lime);border-color:#c0d9a9}
.hint-btn {background:#fff4d7;border:1.5px solid #eddaa9;color:#78500c;box-shadow:none}
.text-link {font-size:14px;min-height:48px;line-height:20px;color:var(--green);font-weight:500}
.intro {padding:28px 0 24px}
.intro h1 {font-size:32px;line-height:1.2;font-weight:700;letter-spacing:-.035em}
.intro p {font-size:16px;line-height:24px;color:var(--muted)}
.eyebrow {font-size:12px;line-height:18px;color:var(--muted)}
.back-home {min-height:48px;padding-top:14px;font-size:14px}
.section-label h2 {font-size:24px;font-weight:700}
.ui-icon {width:22px;height:22px}
.mobile-a-home {padding-top:24px}
.a-date-row {display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:100%;min-height:48px}
.a-date-row time {font-size:14px;line-height:20px;color:var(--muted);font-weight:500}
.a-sync-chip {display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;min-height:48px;min-width:120px;font-size:14px;line-height:20px;color:var(--muted);font-weight:500;flex-shrink:0}
.a-sync-chip .ui-icon {width:18px;height:18px;flex-basis:18px}
.a-sync-chip[data-tone=saved] {color:var(--green)}
.a-sync-chip[data-tone=attention] {color:#78500c}
.a-home-title {font-size:32px;line-height:38px;font-weight:700;margin:20px 0;letter-spacing:-.03em}
.a-home-layout {display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:28px;align-items:start}
.a-home-main,.a-home-aside {display:flex;flex-direction:column;gap:20px;min-width:0}
.a-progress-card,.a-next-card,.a-reading-card {border-radius:24px;padding:24px;min-width:0}
.a-progress-card {display:block;background:#fff;border:1.5px solid var(--line);transition:border-color .15s}
.a-progress-card:hover {border-color:#9dca7c}
.a-progress-top {display:flex;gap:10px;justify-content:space-between;align-items:center}
.a-progress-number {min-width:0}
.a-progress-number strong {display:block;font-size:44px;line-height:48px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.a-progress-number>span {display:block;font-size:14px;line-height:20px;font-weight:500;color:var(--muted);margin-top:3px}
.a-progress-percent {display:grid;place-items:center;min-width:82px;height:72px;padding:8px;border-radius:20px;background:var(--lime);color:var(--green);font-size:28px;line-height:34px;font-weight:700;font-variant-numeric:tabular-nums}
.a-progress-track {height:10px;border-radius:5px;overflow:hidden;background:var(--line);margin-top:12px}
.a-progress-track>span {display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .2s}
.a-progress-details {font-size:12px;line-height:16px;font-weight:500;color:var(--muted);margin:10px 0 0}
.a-next-card {display:flex;flex-direction:column;gap:10px;background:var(--lime);padding-bottom:24px}
.a-next-meta {display:flex;align-items:center;gap:12px;font-size:14px;line-height:20px;font-weight:500;color:var(--green)}
.a-next-meta .ui-icon {width:28px;height:28px;flex-basis:28px}
.a-next-card h2,.a-reading-card h2 {font-size:22px;line-height:28px;font-weight:700;margin:0}
.a-next-card .primary {width:100%;margin-bottom:4px}
.a-section-head {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin:0 0 16px}
.a-section-head h2 {font-size:22px;line-height:28px;font-weight:700;margin:0}
.a-section-head>a {font-size:14px;line-height:20px;font-weight:500;color:var(--green);min-height:48px;min-width:48px;display:flex;align-items:center;justify-content:flex-end;text-align:right;flex-shrink:0}
.a-today-plan {margin-top:4px}
.a-today-plan .plan-dashboard-count {display:none}
.a-today-plan .plan-card {border:1.5px solid var(--line);border-radius:24px;box-shadow:none;background:white;padding:20px;gap:12px}
.a-today-plan .plan-card.is-done {background:#f0f8e7}
.a-today-plan .plan-card h3 {font-size:18px;line-height:24px;font-weight:700}
.a-today-plan .plan-card p {font-size:14px;line-height:20px}
.a-today-plan .plan-card-meta {font-size:12px;line-height:18px}
.a-today-plan .plan-check {width:48px;height:48px;flex-basis:48px;margin:0;border-radius:16px}
.a-today-plan .plan-check:before {display:none}
.a-today-plan .plan-kind {display:none}
.a-today-plan .plan-action {min-height:48px;font-size:14px;padding:10px 14px;box-shadow:none;border:1px solid #d0e5bd;border-radius:14px}
.a-today-plan .plan-card-actions {gap:8px 14px}
.a-today-plan .plan-dashboard-empty {border:1.5px solid var(--line);background:#fff;border-radius:24px;padding:20px}
.a-today-plan .plan-dashboard-empty p {font-size:16px;line-height:24px;color:var(--muted)}
.a-today-plan .plan-dashboard-empty .primary {width:100%}
.a-plan-footer {display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:12px;margin-top:14px}
.a-plan-footer>.subtle {width:100%}
.a-icon-action {display:grid;place-items:center;min-width:56px;min-height:56px;border:1.5px solid var(--line);border-radius:16px;background:#fff}
.a-icon-action:hover {background:var(--lime)}
.a-reading-card {background:var(--blue);color:var(--blue-ink);display:flex;flex-direction:column;gap:10px}
.a-reading-card h2 {color:var(--blue-ink)}
.a-reading-card p {font-size:16px;line-height:24px;margin:0}
.a-reading-card .action-link {width:100%}
.a-home-awards .reward-dashboard {border-radius:24px;padding:24px;box-shadow:none;border:1.5px solid var(--line)}
.reward-dashboard h2 {font-size:20px;line-height:26px;font-weight:700}
.reward-dashboard-heading>a,.reward-dashboard-link {min-height:48px;display:flex;align-items:center;font-size:14px;line-height:20px;color:var(--green)}
.reward-dashboard-feature strong {font-size:18px;line-height:24px}
.reward-dashboard-feature small,.reward-dashboard-feature span:not(.reward-badge),.reward-next>span,.reward-next small {font-size:12px;line-height:18px;color:var(--muted)}
.reward-next strong {font-size:16px;line-height:22px}
.rewards-intro,.reward-settings,.reward-card {border:1.5px solid var(--line);border-radius:24px;box-shadow:none}
.rewards-intro p,.reward-settings>div>p,.reward-setting strong {font-size:16px;line-height:24px}
.reward-setting small,.reward-teasing-preview p {font-size:14px;line-height:22px}
.reward-card h3 {font-size:20px;line-height:26px}
.reward-card p {font-size:16px;line-height:24px}
.reward-status,.reward-topic,.reward-progress-caption,.reward-achieved {font-size:12px;line-height:18px}
.reward-tabs button {min-height:48px;font-size:14px;line-height:20px;border:1.5px solid var(--line);border-radius:14px}
.reward-action {min-height:48px;font-size:14px;line-height:20px}
.a-home-topics {min-width:0}
.a-topic-list {background:#fff;border:1.5px solid var(--line);border-radius:24px;overflow:hidden}
.a-topic-row {display:grid;grid-template-columns:48px minmax(0,1fr) 20px;gap:12px;align-items:center;padding:16px 20px;min-height:84px}
.a-topic-row+.a-topic-row {border-top:1px solid var(--line)}
.a-topic-row:hover {background:#f2f9e9}
.a-topic-icon {height:48px;display:grid;place-items:center;border-radius:16px;background:var(--lime)}
.a-topic-icon .ui-icon {width:26px;height:26px}
.a-topic-row strong {display:block;font-size:16px;line-height:22px;font-weight:600}
.a-topic-row small {display:block;font-size:12px;line-height:18px;color:var(--muted);margin-top:3px}
.a-topic-row>.ui-icon {width:20px;height:20px}
.topic-tile,.topic-overview,.small-panel,.mode-tile,.task-card,.study-panel,.guide-reader,.recall-item,.recall-checklist,.chapter-list {border-color:var(--line);border-width:1.5px;border-radius:24px;box-shadow:none}
.topic-copy h3,.mode-tile h2 {font-size:22px;font-weight:700}
.topic-copy p,.mode-tile p,.small-panel p,.small-panel li {font-size:16px;line-height:24px}
.topic-meta,.topic-open,.mode-cta {font-size:14px;line-height:20px}
.chapter-list>a {min-height:72px;padding:20px}
.chapter-list strong {font-size:16px;line-height:22px;font-weight:600}
.chapter-list small {font-size:14px;line-height:20px}
.level-actions button,.kind-actions button,.reader-mode>a,.reader-mode>span {min-height:48px;font-size:14px;line-height:20px}
.search-box {min-height:56px;border-radius:16px}
.search-box input {font-size:16px;min-height:32px}
.topic-status,.practice-topic-list small {font-size:14px}
.practice-topic-list strong {font-size:16px}
.task-card h2 {font-size:24px;line-height:30px;font-weight:700}
.instruction,.hint-box p,.answer-box p,.condition,.study-panel p,.theory-rules p {font-size:16px;line-height:24px}
.task-number,.card-meta,.tag {font-size:12px}
.tag {border-radius:10px;padding:7px 12px;line-height:18px}
.tag.level {background:#fff4d7;color:#78500c}
.equation {background:#f5f8ef;border-color:transparent;border-radius:18px}
.hint-box {background:#fff4d7;border-color:#ead9aa;border-radius:20px}
.answer-box {background:var(--lime);border-color:#d5e9be;border-radius:20px}
.self-actions button {min-height:56px;font-size:16px;line-height:22px;border-radius:16px}
.self-actions .selected-good {background:var(--accent);color:var(--ink);border-color:var(--accent)}
.filters select {min-height:48px;font-size:16px;border-radius:14px}
.filters label>span {font-size:12px}
.tabs button {min-height:48px;font-size:14px}
.assist-check,.error-options label {min-height:48px;font-size:14px;line-height:20px;display:flex;align-items:center}
.draft summary,.task-sources summary {min-height:48px;display:flex;align-items:center;font-size:14px}
.draft textarea {font-size:16px}
.study-question-map button,.number-grid button {min-width:48px;min-height:48px}
.study-check {min-height:48px;font-size:16px;line-height:24px}
.guide-reader {padding:32px}
.guide-reader h1 {font-size:28px;line-height:34px;font-weight:700}
.guide-reader h2 {font-size:24px;line-height:30px;font-weight:700}
.guide-reader h3 {font-size:20px;line-height:26px;font-weight:700}
.guide-reader p,.guide-reader li,.guide-reader .chapter-lead,.guide-rule p,.guide-rule li,.solution-steps li,.recall-item p,.recall-checklist li,.recall-lead {font-size:16px;line-height:26px;color:var(--ink)}
.reader-meta,.guide-equation .condition,.example-label,.chapter-complete small,.guide-source-list li {font-size:12px;line-height:18px}
.reader-toolbar .text-link,#mobileContents {min-height:48px;font-size:14px}
.reader-pagination .action-link {font-size:14px}
.guide-table {font-size:14px;line-height:22px}
.guide-table-wrap {max-width:100%;overflow-x:auto}
.guide-source-list a {overflow-wrap:anywhere}
.recall-item h3 {font-size:20px;line-height:26px}
.recall-jumps button {font-size:14px;min-height:48px}
.self-check summary {min-height:56px;font-size:16px}
.self-check summary strong {font-size:16px;line-height:24px}
.plan-page {--plan-green:#348308;--plan-ink:#203723;--plan-line:#dfe7d8}
.plan-mode {border:1.5px solid var(--line);padding:4px;gap:4px;border-radius:16px}
.plan-mode button {min-height:48px;font-size:16px;line-height:22px;padding:10px 20px;border-radius:12px}
.plan-mode button[aria-pressed=true] {background:var(--lime);color:var(--green)}
.plan-icon-button {width:48px;height:48px;min-width:48px;flex-basis:48px;border:1.5px solid var(--line);border-radius:16px}
.plan-weekstrip {gap:6px;grid-template-columns:repeat(7,minmax(48px,1fr));overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.plan-weekstrip button {min-width:48px;min-height:84px;border:1.5px solid var(--line);border-radius:16px;scroll-snap-align:center}
.plan-weekstrip button.is-selected {background:var(--accent);border-color:var(--accent);box-shadow:0 3px 0 #348308}
.plan-weekstrip button.is-selected strong,.plan-weekstrip button.is-selected span,.plan-weekstrip button.is-selected small {color:var(--ink)}
.plan-weekstrip button span,.plan-weekstrip button small {font-size:12px}
.plan-calendar-head {border:1.5px solid var(--line);border-radius:20px}
.plan-date-picker {font-size:14px}
.plan-date-picker input {font-size:16px;min-height:48px}
.plan-card {border:1.5px solid var(--line);border-radius:24px;box-shadow:none;padding:20px}
.plan-card h3 {font-size:20px;line-height:26px;color:var(--ink)}
.plan-card p {font-size:14px;line-height:22px;color:var(--muted)}
.plan-card-meta {font-size:12px;line-height:18px;color:var(--muted)}
.plan-check {width:48px;height:48px;flex-basis:48px;margin:0;border-radius:16px}
.plan-check:before {display:none}
.plan-check[aria-pressed=true] {background:var(--accent);border-color:var(--accent)}
.plan-check[aria-pressed=true] .ui-icon {filter:none}
.plan-link,.plan-overdue-link {min-height:48px;font-size:14px;line-height:20px}
.plan-action {background:var(--lime);color:var(--green);min-height:48px;font-size:14px;border:1px solid #cde4b9;box-shadow:none}
.plan-summary,.plan-help,.plan-calm,.plan-section-head p,.plan-suggestion p,.plan-note p {font-size:14px;line-height:22px;color:var(--muted)}
.plan-note summary,.plan-overdue summary {min-height:48px;font-size:14px}
.plan-empty {border-radius:24px}
.plan-empty p {font-size:16px;line-height:24px}
.plan-quick-start button {min-height:48px;font-size:14px}
.plan-dialog {border:1.5px solid var(--line);border-radius:24px;max-height:calc(100dvh - 32px);padding:24px}
.plan-dialog form>label,.plan-form-grid>label,.plan-chapter-picker label {font-size:14px;line-height:22px}
.plan-dialog input:not([type=checkbox]),.plan-dialog select,.plan-dialog textarea {font-size:16px;line-height:24px;min-height:56px;border:1.5px solid var(--line);border-radius:16px;color:var(--ink)}
.plan-dialog textarea {min-height:110px}
.plan-chapter-picker label {min-height:48px}
.plan-dialog .dialog-actions {position:sticky;bottom:-24px;padding:16px 0 24px;background:#fff;margin-bottom:-24px;border-top:1px solid var(--line);z-index:1}
.plan-dialog .dialog-actions button {min-height:56px}
.close {min-width:48px;min-height:48px;flex-basis:48px;border-radius:16px}
footer {font-size:12px}
footer button {min-height:48px;font-size:12px}
.pwa-update-banner {position:fixed;z-index:65;left:50%;bottom:24px;transform:translateX(-50%);width:min(520px,calc(100% - 32px));padding:20px;border:1.5px solid #b8d99b;border-radius:24px;background:#fff;box-shadow:0 10px 35px #20372320;color:var(--ink);font-size:16px;line-height:24px}
.pwa-update-banner p {margin:0 0 12px}
.pwa-update-banner button {min-height:48px;margin:4px 8px 0 0;padding:12px 16px;border-radius:14px;font-size:16px;line-height:22px;background:var(--lime);color:var(--ink)}
.pwa-update-banner button:first-of-type {background:var(--accent);font-weight:600}
.pwa-update-error {font-size:14px;line-height:22px;color:#a3342c;margin-top:12px}
#pwaInstallDialog {border:1.5px solid var(--line);border-radius:24px;max-width:480px;color:var(--ink)}
#pwaInstallDialog ol {padding-left:24px}
#pwaInstallDialog li {font-size:16px;line-height:26px;margin:12px 0}
.mobile-rating-dock {display:none}
@media(max-width:1050px) and (min-width:761px) {
  .shell {padding:0 24px}
  .app-header {gap:12px}
  .brand {font-size:18px}
  .nav-item {font-size:12px;padding:10px 8px}
  .a-home-layout {grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);gap:20px}
  .a-progress-number strong {font-size:36px;line-height:40px}
}
@media(max-width:760px) {
  .mobile-rating-dock {position:fixed;display:block;z-index:32;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom));padding:12px 24px 16px;border-top:1px solid var(--line);background:var(--bg)}
  .mobile-rating-dock-inner {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:680px;margin:0 auto}
  .mobile-rating-dock button {width:100%;min-height:56px;font-size:16px;line-height:22px}
  .mobile-rating-dock button[aria-pressed=true] {outline:2px solid var(--green);outline-offset:2px}
  .mobile-rating-dock [data-rating-proxy=retry][aria-pressed=true] {background:#fff4d7;border-color:#d8bb71;color:#78500c;outline-color:#a67c27}
  body:has(#mobileRatingDock:not([hidden])) #mainContent {padding-bottom:88px}
  body:has(#mobileRatingDock:not([hidden])) #toast {bottom:calc(180px + env(safe-area-inset-bottom))}
  .shell {padding:0 24px}
  .app-header {height:88px;gap:10px;border-bottom:0;padding-top:env(safe-area-inset-top)}
  .brand {font-size:20px}
  .brand-mark {width:42px;height:42px;flex-basis:42px}
  #openAwards {height:48px;width:48px;min-width:48px;border-radius:16px}
  #appNav {position:fixed;z-index:30;left:0;right:0;bottom:0;width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(76px + env(safe-area-inset-bottom));padding:8px 0 calc(8px + env(safe-area-inset-bottom));gap:0;border-top:1px solid var(--line);box-shadow:none;background:#fff}
  .nav-item {flex-direction:column;justify-content:center;min-height:56px;padding:6px 2px;gap:4px;font-size:12px;line-height:16px;border-radius:16px;min-width:0}
  .nav-item .ui-icon {width:23px;height:23px;flex-basis:23px}
  .nav-item.active {border:0}
  .mobile-a-home {padding-top:12px}
  .a-home-title {font-size:28px;line-height:34px;margin:20px 0}
  .a-date-row {gap:6px}
  .a-date-row time {font-size:14px}
  .a-sync-chip {font-size:14px;min-width:116px}
  .a-home-layout {display:flex;flex-direction:column;gap:20px}
  .a-home-main,.a-home-aside {width:100%;gap:20px}
  .a-progress-card,.a-next-card,.a-reading-card {padding:20px;border-radius:24px}
  .a-progress-number strong {font-size:36px;line-height:40px}
  .a-progress-percent {height:72px;min-width:82px}
  .a-progress-top {gap:8px}
  .a-progress-details {font-size:12px;line-height:16px}
  .a-next-card {padding-bottom:24px}
  .a-next-card h2,.a-reading-card h2,.a-section-head h2 {font-size:20px;line-height:26px}
  .a-today-plan {margin-top:0}
  .a-section-head {margin:0 0 16px}
  .a-home-awards .reward-dashboard {padding:20px}
  .intro {padding:20px 0 24px}
  .intro h1 {font-size:28px;line-height:34px}
  .intro p {font-size:16px;line-height:24px}
  .back-home:not([hidden])+.intro {max-width:100%}
  .primary,.subtle,.hint-btn,.nav-button {font-size:16px;min-height:56px;padding:14px 16px}
  .text-link {font-size:14px;min-height:48px}
  .section-label h2 {font-size:22px;line-height:28px}
  .section-label .text-link {font-size:14px}
  .topic-tile {padding:20px;border-radius:24px}
  .topic-copy h3 {font-size:20px;line-height:26px}
  .topic-copy p,.mode-tile p,.small-panel p,.small-panel li {font-size:16px;line-height:24px}
  .topic-meta,.topic-open,.mode-cta {font-size:12px;line-height:18px}
  .chapter-list>a {padding:18px 16px}
  .chapter-list strong {font-size:16px;line-height:22px}
  .chapter-list small {font-size:14px;line-height:20px}
  .card-inner {padding:22px 18px}
  .task-card h2 {font-size:24px;line-height:30px}
  .instruction,.hint-box p,.answer-box p,.condition {font-size:16px;line-height:24px}
  .actions>.primary,.actions>.hint-btn {font-size:16px;min-height:56px}
  .actions {flex-wrap:wrap}
  .actions>button {flex:1;min-width:120px}
  .self-actions {flex-direction:row;flex-wrap:wrap;gap:10px}
  .self-actions button {min-width:115px;flex:1;min-height:56px;font-size:16px}
  .card-bottom {flex-wrap:wrap}
  .card-bottom .position {font-size:12px;order:3;flex-basis:100%;text-align:center}
  .filters select {font-size:16px;min-height:48px}
  .tabs button {min-height:48px;font-size:14px}
  .controls {padding:16px 0 22px}
  .guide-reader {padding:24px 20px;border-radius:24px}
  .guide-reader h1 {font-size:28px;line-height:34px}
  .guide-reader h2 {font-size:24px;line-height:30px}
  .guide-reader h3 {font-size:20px;line-height:26px}
  .guide-reader p,.guide-reader li,.guide-reader .chapter-lead,.guide-rule p,.guide-rule li,.solution-steps li,.recall-item p,.recall-checklist li,.recall-lead {font-size:16px;line-height:26px}
  .guide-rule {padding:18px 16px}
  .guide-reader .example-takeaway {font-size:14px!important;line-height:22px!important}
  .reader-toolbar {gap:12px;padding:12px 0 20px}
  .reader-toolbar .text-link {font-size:14px;line-height:20px}
  .reader-toolbar .text-link:first-child {max-width:55%}
  #mobileContents {min-height:48px;font-size:14px}
  .reader-pagination {flex-direction:column;gap:12px}
  .reader-pagination .action-link {width:100%;max-width:100%;font-size:14px}
  .reader-pagination>span:empty {display:none}
  .reader-mode {flex-wrap:wrap}
  .reader-mode>a,.reader-mode>span {min-height:48px;font-size:14px}
  .recall-jumps button {font-size:14px;min-height:48px}
  .recall-toolbar>.subtle {width:100%}
  .plan-topbar {flex-wrap:wrap;gap:12px}
  .plan-topbar>.primary {font-size:16px;min-height:56px;padding:14px 16px;flex:1}
  .plan-mode {flex:1}
  .plan-mode button {font-size:16px;min-height:48px;padding:10px 14px;flex:1}
  .plan-calendar-head {padding:12px;gap:8px;border-radius:20px}
  .plan-calendar-head strong {font-size:16px}
  .plan-calendar-head .plan-link {font-size:14px;min-height:48px}
  .plan-icon-button {width:48px;min-width:48px;height:48px;flex-basis:48px}
  .plan-date-picker {font-size:14px;gap:8px}
  .plan-date-picker input {min-height:48px;font-size:16px;padding:8px}
  .plan-weekstrip {gap:1px;grid-template-columns:repeat(7,minmax(48px,1fr));margin:14px 0 20px}
  .plan-weekstrip button {min-height:80px;border-radius:14px}
  .plan-weekstrip button span,.plan-weekstrip button small {font-size:11px}
  .plan-weekstrip button strong {font-size:22px}
  .plan-card {padding:18px;gap:12px}
  .plan-card>.plan-kind {display:none}
  .plan-card h3 {font-size:18px;line-height:24px}
  .plan-card p {font-size:14px;line-height:22px}
  .plan-card-meta {font-size:12px;line-height:18px}
  .plan-card-actions {gap:8px 14px}
  .plan-card-actions .plan-link {min-height:48px;font-size:14px}
  .plan-check {width:48px;height:48px;flex-basis:48px}
  .plan-summary {font-size:14px;line-height:22px;gap:6px}
  .plan-section-head {align-items:flex-start;flex-wrap:wrap}
  .plan-section-head h2 {font-size:22px;line-height:28px}
  .plan-section-head p {font-size:14px;line-height:22px}
  .plan-suggestion {padding:18px}
  .plan-suggestion h3 {font-size:18px}
  .plan-suggestion p {font-size:14px}
  .plan-quick-start {flex-direction:column}
  .plan-quick-start button {justify-content:center;min-height:48px;font-size:14px}
  .plan-dialog {width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:20px}
  .plan-dialog .dialog-actions {bottom:-20px;margin-bottom:-20px;padding-bottom:20px}
  .plan-form-grid {grid-template-columns:1fr;gap:0}
  .plan-help {font-size:14px;line-height:22px}
  .plan-dialog .dialog-actions button {min-height:56px;font-size:16px}
  .plan-dialog .dialog-actions .primary {flex:1}
  .plan-empty {padding:28px 20px}
  .plan-empty p {font-size:16px;line-height:24px}
  .plan-week-day {padding:16px}
  .plan-week-day .plan-card {padding:14px;gap:10px}
  .plan-week-day .plan-check {width:48px;flex-basis:48px}
  .plan-week-day .plan-card-actions {margin-left:-58px}
  .number-grid {grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:8px}
  .study-question-map {gap:8px}
  .study-question-map button,.number-grid button {min-width:48px;min-height:48px}
  .study-next-actions a,.study-next-actions button {min-height:48px;font-size:14px}
  .study-reaction {font-size:14px!important}
  .progress-top-actions .action-link {font-size:14px}
  footer {padding-bottom:calc(106px + env(safe-area-inset-bottom))}
  #toast {bottom:calc(90px + env(safe-area-inset-bottom));font-size:14px}
  .pwa-update-banner {bottom:calc(88px + env(safe-area-inset-bottom));padding:18px;max-height:calc(100dvh - 130px);overflow:auto}
}
@media(max-width:360px) {
  .shell {padding:0 16px}
  .brand {font-size:18px}
  .a-progress-number strong {font-size:32px;line-height:38px}
  .a-progress-percent {min-width:70px;font-size:26px}
  .a-date-row {align-items:center}
  .a-date-row time,.a-sync-chip {font-size:12px;line-height:18px}
  .a-sync-chip {min-width:106px}
  .nav-item {font-size:11px}
  .plan-card {padding:16px 12px;gap:10px}
}
@media(prefers-reduced-motion:reduce) {
  .a-progress-track>span,.a-progress-card {transition:none}
}