:root { --green-950:#123c2c; --green-900:#174d36; --green-700:#2f7450; --green-500:#6fa47f; --green-300:#a8c994; --green-100:#e8f2e3; --green-50:#f5f9f2; --cream:#fff8e9; --gold:#f4bd52; --ink:#183127; --muted:#68786f; --line:#dbe7d9; --danger:#a13d35; }
* { box-sizing:border-box; }
html { min-width:0; background:#f2f8f4; scrollbar-gutter:stable; }
body { margin:0; min-width:0; color:var(--ink); background:radial-gradient(circle at 85% 0,#dff0e6 0,transparent 35rem),radial-gradient(circle at 0 25%,#edf8f2 0,transparent 27rem),#f7fbf8; font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; line-height:1.55; overflow-x:hidden; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:10; padding:.65rem 1rem; color:#fff; background:var(--green-900); border-radius:.6rem; }
.skip-link:focus { top:1rem; }
.student-shell { width:min(100% - 2rem,68rem); margin:0 auto; padding:max(1.25rem,env(safe-area-inset-top)) 0 max(2rem,env(safe-area-inset-bottom)); }
.login-wrap { width:min(100%,28rem); min-height:calc(100vh - 3rem); margin:auto; display:grid; align-content:center; gap:1rem; }
.student-brand { display:flex; align-items:center; gap:.8rem; color:var(--green-900); }
.student-brand p,.student-brand h1,.student-brand strong,.student-brand small { margin:0; display:block; }
.student-brand p { font-weight:800; letter-spacing:.12em; }
.student-brand h1 { font-size:1.15rem; }
.deer-mark { width:3.25rem; height:3.25rem; display:grid; place-items:center; flex:none; color:#fff; background:linear-gradient(145deg,var(--green-500),var(--green-900)); border-radius:1rem; font-weight:900; box-shadow:0 .55rem 1.4rem rgba(23,77,54,.18); }
.student-card { min-width:0; padding:1.35rem; border:1px solid rgba(219,231,217,.95); border-radius:1.45rem; background:rgba(255,255,255,.96); box-shadow:0 .85rem 2.1rem rgba(25,74,51,.08); }
.login-card { display:grid; gap:1.15rem; }
.login-card h2,.login-card p { margin:.2rem 0; }
.eyebrow { margin:0; color:var(--green-700); font-size:.78rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.muted,.contact-note { color:var(--muted); }
.student-field { display:grid; gap:.4rem; margin-bottom:.9rem; }
.student-field label { font-weight:700; }
.student-field input { width:100%; min-width:0; padding:.82rem .9rem; border:1px solid var(--line); border-radius:.75rem; color:var(--ink); background:#fff; }
.student-field input:focus { outline:3px solid rgba(71,164,110,.18); border-color:var(--green-500); }
.password-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.55rem; }
.password-toggle,.student-secondary { padding:.7rem .9rem; border:1px solid var(--line); border-radius:.7rem; color:var(--green-900); background:#fff; cursor:pointer; white-space:nowrap; }
.student-primary { width:100%; padding:.85rem 1rem; border:0; border-radius:.75rem; color:#fff; background:var(--green-700); font-weight:800; cursor:pointer; }
.student-error { padding:.75rem .85rem; border-radius:.7rem; color:var(--danger); background:#fff1ef; }
.contact-note { margin:0; font-size:.88rem; text-align:center; }
.student-topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.student-brand.compact { color:var(--green-900); text-decoration:none; }
.student-brand.compact .deer-mark { width:2.65rem; height:2.65rem; border-radius:.8rem; }
.student-brand.compact small { color:var(--muted); }
.student-topbar form { margin:0; }
.welcome-card,.today-card { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.welcome-card h1,.welcome-card p,.today-card h2,.today-card p { margin:.15rem 0; overflow-wrap:anywhere; }
.sync-status { display:flex; align-items:center; gap:.4rem; flex:none; color:var(--green-700); font-size:.82rem; }
.sync-status i { width:.48rem; height:.48rem; border-radius:50%; background:var(--green-500); }
.sync-action { padding:.3rem .45rem; border:0; border-radius:.55rem; background:transparent; cursor:default; }
.sync-action[data-status="failed"],.sync-action[data-status="retrying"] { color:var(--green-700); background:transparent; cursor:default; }
.sync-action[data-status="identity"],.sync-action[data-status="conflict"],.sync-action[data-status="invalid"],.sync-action[data-status="session"],.sync-action[data-status="storage"] { color:var(--danger); background:#fff1ef; }
.sync-action:disabled { opacity:1; }
.sync-action[data-status="offline"] i { background:#9a8870; }
.sync-action[data-status="syncing"] i { background:#d49b32; }
.sync-action[data-status="retrying"] i,.sync-action[data-status="failed"] i { background:#d49b32; }
.future-actions { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; width:min(100%,20rem); }
.future-actions span,.future-actions a { padding:.7rem; border-radius:.75rem; color:var(--green-900); background:var(--green-100); font-weight:800; text-decoration:none; }
.future-actions small { display:block; color:var(--muted); font-size:.72rem; font-weight:500; }
.section-heading { margin:1.5rem 0 .75rem; }
.section-heading h2 { margin:.1rem 0; }
.student-module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.module-card header { display:flex; gap:.7rem; align-items:flex-start; }
.module-card header div { min-width:0; }
.module-card h3,.module-card p { margin:0; overflow-wrap:anywhere; word-break:normal; }
.module-card h3 { line-height:1.3; }
.module-card header p { color:var(--muted); font-size:.82rem; }
.module-icon { width:2.6rem; height:2.6rem; display:grid; place-items:center; flex:none; border-radius:.75rem; color:var(--green-900); background:var(--green-100); font-weight:900; }
.progress-copy { display:flex; justify-content:space-between; gap:.6rem; margin-top:1rem; font-size:.84rem; }
.progress-copy span { color:var(--muted); }
.progress-track { height:.5rem; margin:.45rem 0 .9rem; overflow:hidden; border-radius:999px; background:#e4eee8; }
.progress-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--green-500),var(--green-700)); }
.module-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem; margin:0; }
.module-stats div { min-width:0; padding:.55rem .3rem; border-radius:.6rem; text-align:center; background:var(--green-50); }
.module-stats dt { color:var(--muted); font-size:.72rem; white-space:nowrap; }
.module-stats dd { margin:.15rem 0 0; font-weight:800; }
.module-empty { margin-top:.75rem!important; color:var(--muted); font-size:.82rem; }
.module-enter { display:inline-block; margin-top:.85rem; color:var(--green-700); font-weight:800; text-decoration:none; }
.empty-state { text-align:center; }
.empty-state>span { width:3rem; height:3rem; display:grid; place-items:center; margin:0 auto; border-radius:1rem; background:var(--green-100); }
.link-button { display:inline-block; width:auto; text-decoration:none; }
.learning-module-nav,.learning-category-nav { display:flex; gap:.55rem; margin-bottom:.8rem; padding:.2rem 0; overflow-x:auto; scrollbar-width:none; }
.learning-module-nav::-webkit-scrollbar,.learning-category-nav::-webkit-scrollbar { display:none; }
.learning-module-nav a,.learning-category-nav a,.learning-module-nav span { flex:none; padding:.55rem .8rem; border:1px solid var(--line); border-radius:999px; color:var(--green-900); background:#fff; text-decoration:none; white-space:nowrap; }
.learning-module-nav a[aria-current="page"],.learning-category-nav a[aria-current="page"] { color:#fff; border-color:var(--green-700); background:var(--green-700); }
.learning-empty { margin-top:1rem; }
.review-study-time { color:var(--green-900); font-weight:700; }
.learning-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.learning-toolbar p { margin:0; }
.mode-switch { display:flex; gap:.45rem; }
.mode-switch button,.card-navigation button,.flip-button { padding:.65rem .9rem; border:1px solid var(--line); border-radius:.7rem; color:var(--green-900); background:#fff; font-weight:800; cursor:pointer; }
.mode-switch button[aria-pressed="true"] { color:#fff; border-color:var(--green-700); background:var(--green-700); }
.flip-stage { perspective:1200px; overflow-anchor:none; }
.learning-card { width:100%; }
.learning-card.is-turning { pointer-events:none; will-change:transform; }
.learning-face { width:100%; min-width:0; padding:1.3rem; border:1px solid var(--line); border-radius:1.2rem; background:#fff; box-shadow:0 .8rem 2.2rem rgba(25,74,51,.08); }
.learning-face[hidden] { display:none!important; }
.related-card-link { display:block; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--green-800); font-weight:700; text-decoration:none; }
.related-card-link[hidden] { display:none!important; }
.card-render-status { margin:.75rem 0; padding:.75rem; border-radius:.75rem; color:var(--green-900); background:var(--green-50); }
.learning-face h1,.learning-face h2,.learning-face p { overflow-wrap:anywhere; }
.learning-face h1 { margin:.45rem 0 1rem; font-size:clamp(1.55rem,6vw,2.25rem); }
.learning-face h2 { margin:.9rem 0 .3rem; font-size:1rem; color:var(--green-900); }
.learning-face p { margin:.2rem 0; white-space:pre-wrap; }
.card-meta { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.8rem; }
.content-sections { display:grid; gap:.75rem; }
.content-sections section,.rationale-list section { padding:.75rem; border-radius:.75rem; background:var(--green-50); }
.test-panel h2 { margin-top:0; }
.answer-options { display:grid; gap:.65rem; margin-top:1rem; }
.answer-options button { width:100%; padding:.85rem; border:1px solid var(--line); border-radius:.75rem; color:var(--ink); background:#fff; text-align:left; cursor:pointer; touch-action:manipulation; }
.answer-options button.correct { border-color:#3a8d5d; background:#e6f6ec; }
.answer-options button.wrong { border-color:#bd554b; background:#fff0ee; }
.answer-feedback { min-height:1.6rem; margin-top:.8rem!important; font-weight:800; }
.flip-button { width:100%; margin:.8rem 0; color:#fff; border-color:var(--green-700); background:var(--green-700); }
.mastery-panel { margin-top:.2rem; text-align:center; }
.mastery-panel>p { margin:.1rem 0 .7rem; }
.mastery-panel>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
.mastery-panel button { min-width:0; min-height:4.25rem; padding:.75rem .25rem; border:2px solid transparent; border-radius:.75rem; color:var(--green-900); font-weight:900; cursor:pointer; touch-action:manipulation; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.mastery-panel button[data-mastery="known"] { border-color:#9fd7ba; background:#e7f7ee; }
.mastery-panel button[data-mastery="fuzzy"] { border-color:#e6c875; background:#fff3cf; }
.mastery-panel button[data-mastery="unknown"] { border-color:#e3a2a8; background:#fde8ea; }
.mastery-panel button[data-mastery="known"].is-selected { border-color:#15865d; box-shadow:0 0 0 4px rgba(21,134,93,.18); }
.mastery-panel button[data-mastery="fuzzy"].is-selected { border-color:#b47b00; box-shadow:0 0 0 4px rgba(180,123,0,.2); }
.mastery-panel button[data-mastery="unknown"].is-selected { border-color:#b5404d; box-shadow:0 0 0 4px rgba(181,64,77,.18); }
.mastery-panel button.is-selected { transform:translateY(-2px); }
.mastery-panel button span { display:block; color:var(--muted); font-size:.68rem; font-weight:500; }
.mastery-panel button:disabled { opacity:.48; cursor:not-allowed; }
.mastery-panel button.is-selected:disabled { opacity:1; }
#mastery-status { min-height:1.5rem; color:var(--green-700); }
.card-navigation { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin-top:.8rem; }
.card-navigation.review-navigation { grid-template-columns:1fr; }
.card-navigation button:disabled { opacity:.45; }
.mode-switch button:disabled { opacity:.58; cursor:not-allowed; }
.csrf-source { display:none; }
@media (max-width:700px) { .student-shell{width:min(100% - 1rem,64rem);padding-top:max(.75rem,env(safe-area-inset-top))}.student-module-grid{grid-template-columns:1fr}.today-card{display:grid}.future-actions{width:100%}.student-card{padding:1rem}.module-stats{gap:.25rem}.student-topbar{align-items:flex-start}.student-brand.compact small{font-size:.7rem}.learning-toolbar{align-items:flex-start}.learning-face{padding:1rem} }
@media (max-width:360px) { .student-topbar{display:grid}.student-topbar form,.student-secondary{width:100%}.future-actions{grid-template-columns:1fr}.module-stats{grid-template-columns:1fr 1fr} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

/* 1.1.0 student visual system: preserve the verified flip and natural-scroll rules above. */
.brand-logo { width:4.25rem; height:4.25rem; flex:none; border:1px solid rgba(47,116,80,.12); border-radius:1.25rem; object-fit:cover; box-shadow:0 .65rem 1.5rem rgba(23,77,54,.12); }
.student-brand.compact .brand-logo { width:3.15rem; height:3.15rem; border-radius:1rem; }
.topbar-actions { display:flex; align-items:center; gap:.6rem; }
.brand-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(13rem,32%); align-items:center; min-height:17rem; margin-bottom:1rem; overflow:hidden; background:linear-gradient(120deg,rgba(255,255,255,.98),rgba(230,246,236,.96)); }
.brand-hero h1 { margin:.3rem 0; color:var(--green-950); font-size:clamp(2.15rem,6vw,4rem); line-height:1.1; letter-spacing:.02em; }
.brand-hero p { margin:.45rem 0; color:var(--muted); }
.brand-hero img { width:min(100%,18rem); justify-self:end; border-radius:50%; mix-blend-mode:multiply; }
.today-card { align-items:center; gap:1.25rem; }
.student-module-grid .module-card:first-child:nth-last-child(odd) { grid-column:1 / -1; }
.module-card h3 { white-space:nowrap; }
.progress-track { height:.55rem; background:#e3ebe3; }
.progress-track i { background:linear-gradient(90deg,var(--green-300),var(--green-700)); transition:width .25s ease; }
.progress-track-large { height:.72rem; width:min(100%,30rem); }
.module-actions { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin-top:1rem; }
.primary-button,.outline-button,.disabled-button { display:inline-flex; min-height:2.8rem; align-items:center; justify-content:center; padding:.65rem .9rem; border-radius:.8rem; font-weight:800; text-decoration:none; }
.primary-button { color:#fff; border:1px solid var(--green-700); background:linear-gradient(135deg,var(--green-700),var(--green-900)); }
.outline-button { color:var(--green-900); border:1px solid var(--green-700); background:#fff; }
.disabled-button { color:var(--muted); border:1px solid var(--line); background:#f4f7f4; }
.back-link { width:2.8rem; height:2.8rem; display:grid; place-items:center; flex:none; border-radius:50%; color:var(--green-900); background:var(--green-100); font-size:1.5rem; text-decoration:none; }
.directory-topbar .student-brand { margin-right:auto; }
.directory-summary { margin-bottom:1.25rem; color:#fff; background:linear-gradient(135deg,var(--green-950),var(--green-700)); }
.directory-summary h1,.directory-summary p { margin:.15rem 0; }
.directory-summary .eyebrow { color:#d8eadb; }
.directory-summary .progress-track { margin-top:1.1rem; background:rgba(255,255,255,.26); }
.directory-summary .progress-track i { background:linear-gradient(90deg,#fff7dc,#d7eacb); }
.directory-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin:1.5rem 0 .7rem; }
.directory-heading h2,.directory-heading p { margin:.1rem 0; }
.category-directory-list { display:grid; gap:.85rem; }
.category-directory-row { position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem; padding-right:3.6rem; color:var(--ink); text-decoration:none; }
.category-directory-row h3,.category-directory-row p { margin:.05rem 0; }
.category-directory-row p,.category-progress-copy span { color:var(--muted); }
.category-progress-copy { display:flex; align-items:center; gap:.75rem; }
.category-directory-row .progress-track { grid-column:1 / -1; margin:.35rem 0 0; }
.category-directory-row>b { position:absolute; right:1.25rem; top:50%; color:var(--green-700); font-size:2.1rem; transform:translateY(-50%); }
.card-directory-list { display:grid; gap:.65rem; margin:1rem 0; padding:0; list-style:none; counter-reset:cards; }
.card-directory-list li { counter-increment:cards; }
.card-directory-list a { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.8rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:1rem; color:var(--ink); background:rgba(255,255,255,.96); box-shadow:0 .45rem 1.2rem rgba(25,74,51,.05); text-decoration:none; }
.card-directory-list a::before { content:counter(cards); width:2rem; height:2rem; display:grid; place-items:center; border-radius:.65rem; color:var(--green-900); background:var(--green-100); font-weight:900; }
.card-stable-id { color:var(--muted); font-size:.75rem; }
.card-directory-list strong { grid-column:2; overflow-wrap:anywhere; }
.card-directory-list small { grid-column:3; grid-row:1 / span 2; color:var(--green-700); white-space:nowrap; }
.learning-context { display:flex; align-items:center; gap:.7rem; min-width:0; }
.learning-context>div { min-width:0; }
.directory-compact-button { flex:none; display:inline-flex; align-items:center; justify-content:center; padding:.38rem .6rem; border:1px solid var(--line); border-radius:.65rem; color:var(--muted); background:var(--green-50); font-size:.76rem; font-weight:800; text-decoration:none; }
.compact-progress { padding:1rem 1.1rem; }
.compact-progress>div:first-child { display:flex; justify-content:space-between; gap:.8rem; }
.compact-progress .progress-track { margin:.55rem 0 0; }
.learning-face { border-radius:1.45rem; }
.direction-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.direction-card { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; min-height:10rem; color:var(--ink); text-decoration:none; box-shadow:0 .55rem 1.4rem rgba(25,74,51,.07); }
.direction-card:hover,.direction-card:focus-visible { border-color:var(--green-500); outline:3px solid rgba(47,116,80,.12); outline-offset:2px; }
.direction-card h3,.direction-card p { margin:.1rem 0; }
.direction-card h3 { color:var(--green-950); font-size:1.45rem; }
.direction-card>div>p:last-child { color:var(--muted); }
.direction-card>b { color:var(--green-700); font-size:2rem; font-weight:500; }
.direction-card-pending { background:#f6fbf8; }
.direction-mark { width:3.1rem; height:3.1rem; display:grid; place-items:center; flex:none; border-radius:.8rem; color:#fff; background:var(--green-700); font-size:1.25rem; font-weight:900; }
.direction-topbar { display:grid; grid-template-columns:auto minmax(0,1fr) auto; }
.direction-topbar .student-brand { min-width:0; }
.direction-summary { margin-bottom:1rem; background:linear-gradient(120deg,#fff,#e9f6ee); }
.direction-summary h1,.direction-summary p { margin:.15rem 0; }
.direction-empty { max-width:42rem; margin:8vh auto 0; text-align:center; }
.direction-empty h1 { margin:.4rem 0; color:var(--green-950); font-size:clamp(2rem,7vw,3.5rem); }
.direction-empty>p:not(.eyebrow) { max-width:31rem; margin:.5rem auto 1.4rem; color:var(--muted); }
.direction-mark-large { width:4rem; height:4rem; margin:0 auto 1rem; font-size:1.6rem; }

@media (max-width:700px) {
  .student-shell { width:min(100% - 1rem,68rem); }
  .student-module-grid .module-card:first-child:nth-last-child(odd) { grid-column:auto; }
  .student-brand.compact { min-width:0; }
  .student-brand.compact .brand-logo { width:2.7rem; height:2.7rem; }
  .student-brand.compact span { min-width:0; }
  .student-brand.compact small { font-size:.68rem; }
  .student-brand.compact strong { font-size:.86rem; white-space:nowrap; }
  .home-topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  .home-topbar .topbar-actions { grid-column:2; grid-row:1; }
  .home-topbar .sync-status { max-width:7.5rem; }
  .home-topbar .sync-status span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .brand-hero { grid-template-columns:minmax(0,1fr) 6.5rem; min-height:11rem; }
  .brand-hero h1 { font-size:1.55rem; white-space:nowrap; }
  .brand-hero img { width:6.7rem; }
  .brand-hero p { font-size:.82rem; }
  .directory-topbar { display:grid; grid-template-columns:auto minmax(0,1fr); }
  .category-directory-row { padding-right:3rem; }
  .card-directory-list a { grid-template-columns:auto minmax(0,1fr); gap:.5rem .7rem; }
  .card-directory-list small,.card-stable-id,.card-directory-list strong { grid-column:2; grid-row:auto; }
  .compact-progress>div:first-child { font-size:.9rem; }
  .direction-grid { grid-template-columns:1fr; }
  .direction-card { min-height:8.5rem; }
}

/* 1.4.0 design-alignment: clean green hierarchy from the approved product comps. */
:root { --green-950:#063f29; --green-900:#0b5737; --green-700:#137346; --green-500:#68ad83; --green-300:#9ccdaf; --green-100:#edf7f0; --green-50:#f7fbf8; --line:#dce9e0; --ink:#17271f; --muted:#64736b; }
body { background:linear-gradient(180deg,#fff 0,#f4faf6 58%,#fff 100%); }
.student-card { border-color:#dce8df; border-radius:1rem; box-shadow:0 .3rem 1rem rgba(17,79,49,.045); }
.home-topbar { padding:.35rem 0 1.15rem; border-bottom:1px solid #e2ece5; }
.home-topbar .student-brand.compact .brand-logo { width:4.25rem; height:4.25rem; border:0; border-radius:0; box-shadow:none; object-fit:contain; }
.home-topbar .student-brand.compact strong { color:var(--green-950); font-size:1.25rem; letter-spacing:.08em; }
.home-topbar .student-brand.compact small { margin-top:.18rem; color:var(--muted); font-size:.8rem; }
.home-section-heading { display:flex; align-items:center; gap:.65rem; margin:1.4rem 0 .9rem; }
.home-section-heading i { width:.25rem; height:1.45rem; border-radius:999px; background:var(--green-700); }
.home-section-heading h1 { margin:0; font-size:1.2rem; }
.home-directions .direction-grid { grid-template-columns:1fr; gap:.85rem; }
.home-directions .direction-card { min-height:9.4rem; padding:1rem 1.1rem; border:1px solid #dce8df; border-radius:.8rem; background:#fff; box-shadow:none; }
.home-directions .direction-card:first-child,.home-directions .direction-card:nth-child(2) { background:#fff; }
.direction-icon { width:6.6rem; height:6.6rem; border-radius:.75rem; color:var(--green-700); background:linear-gradient(145deg,#f7fbf8,#eaf5ee); font-size:2.2rem; }
.direction-icon-xingce,.direction-icon-essay { color:var(--green-700); background:linear-gradient(145deg,#f7fbf8,#eaf5ee); }
.home-directions .direction-card h3 { font-size:1.45rem; }
.home-directions .direction-card small { display:inline-block; padding:.16rem .55rem; border-radius:999px; background:#edf8f0; }
.compact-today { margin-top:1rem; padding:1rem 1.1rem; border-radius:.8rem; box-shadow:none; }
.today-copy h2,.today-copy p,.today-copy small { margin:.05rem 0; }
.today-icon { width:3.5rem; height:3.5rem; border:1px solid #cce4d3; border-radius:.65rem; color:var(--green-700); background:#f1f8f3; font-size:1.4rem; }
.home-actions a { border-radius:.55rem; }
.student-bottom-nav { min-height:4.35rem; border-top:1px solid #dce8df; box-shadow:none; backdrop-filter:none; }
.student-bottom-nav a.active span { background:transparent; }
.direction-brand .brand-logo { border:0; border-radius:0; box-shadow:none; object-fit:contain; }
.direction-module-tile { min-height:10rem; border-radius:.75rem; box-shadow:none; }
.direction-module-tile .module-graphic { border-radius:.65rem; }
.essay-module-tile { background:#fff; }
.essay-module-tile:nth-child(2) .module-graphic { color:var(--green-900); background:var(--green-100); }
.essay-module-tile.is-preparing { opacity:1; color:#6f7c75; background:#fbfdfb; }
.essay-module-tile.is-preparing .module-graphic { color:#7c8b83; background:#f0f4f1; }
.essay-module-tile.is-preparing small { color:#77847d; }
.direction-progress-card { border-radius:.8rem; box-shadow:none; }

@media (max-width:700px) {
  .student-shell { width:calc(100% - 1.25rem); }
  .home-topbar { grid-template-columns:minmax(0,1fr) auto; }
  .home-topbar .student-brand.compact { align-items:center; }
  .home-topbar .student-brand.compact .brand-logo { width:4.05rem; height:4.05rem; }
  .home-topbar .student-brand.compact strong { font-size:1rem; letter-spacing:.04em; }
  .home-topbar .student-brand.compact small { display:block; font-size:.72rem; }
  .home-directions .direction-grid { grid-template-columns:1fr; }
  .home-directions .direction-card { display:grid; grid-template-columns:6rem minmax(0,1fr) auto; align-content:center; min-height:8.7rem; padding:.85rem 1rem; }
  .home-directions .direction-icon { grid-column:auto; width:5.4rem; height:5.4rem; font-size:1.9rem; }
  .home-directions .direction-card h3 { font-size:1.3rem; white-space:nowrap; }
  .home-directions .direction-card p { font-size:.8rem; }
  .home-directions .direction-card small { font-size:.72rem; }
  .compact-today { grid-template-columns:minmax(0,1fr) auto; }
  .home-actions { width:auto; }
  .home-actions a { min-width:5.5rem; }
  .compact-today .progress-track { grid-column:1 / -1; }
  .direction-module-tile { display:grid; grid-template-columns:1fr; align-content:center; justify-items:center; min-height:10.4rem; padding:.8rem .55rem; text-align:center; }
  .direction-module-tile .module-graphic { width:3.35rem; height:3.35rem; margin:0 0 .5rem; }
  .direction-module-tile h2 { min-height:2.6em; display:grid; place-items:center; font-size:.98rem; line-height:1.3; word-break:keep-all; overflow-wrap:normal; }
  .direction-module-tile p { display:none; }
  .direction-module-tile small { font-size:.67rem; }
  .direction-module-tile .tile-progress { width:70%; }
}

@media (max-width:370px) {
  .home-topbar .student-brand.compact strong { font-size:.9rem; }
  .compact-today { grid-template-columns:1fr; }
  .home-actions { width:100%; }
}

@media (max-width:420px) {
  .student-shell { width:calc(100% - 1rem); }
  .home-topbar { grid-template-columns:1fr; }
  .home-topbar .topbar-actions { grid-column:1; grid-row:2; justify-content:space-between; width:100%; }
  .brand-hero { grid-template-columns:minmax(0,1fr) 5.5rem; }
  .brand-hero h1 { font-size:1.45rem; }
  .brand-hero img { width:5.7rem; }
  .today-card { justify-content:stretch; }
  .today-card>div,.future-actions { width:100%; }
  .future-actions { grid-template-columns:1fr; }
  .module-card h3 { font-size:1.08rem; }
  .direction-topbar { grid-template-columns:auto minmax(0,1fr); }
  .direction-topbar .sync-status { grid-column:2; justify-self:start; }
  .direction-card { gap:.75rem; padding:.9rem; }
  .direction-card h3 { font-size:1.25rem; }
  .direction-mark { width:2.75rem; height:2.75rem; }
}

/* 1.3.1 approved compact student information architecture. */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
body { background:linear-gradient(180deg,#f8fbf9 0,#edf7f1 58%,#f8fbf9 100%); }
.student-shell { width:min(100% - 2rem,58rem); padding-bottom:6.4rem; }
.student-menu-button { min-height:2.35rem; padding:.45rem .7rem; border:1px solid var(--line); border-radius:.7rem; color:var(--green-900); background:#fff; font-weight:800; cursor:pointer; }
.home-topbar { margin-bottom:.7rem; }
.home-intro { padding:.75rem .2rem .3rem; }
.home-intro h1,.home-intro p { margin:.15rem 0; }
.home-intro h1 { color:var(--green-950); font-size:clamp(1.7rem,5vw,2.45rem); }
.home-directions { margin-top:.75rem; }
.home-directions .direction-grid { gap:.8rem; }
.home-directions .direction-card { min-height:8.75rem; padding:1rem 1.1rem; border:0; background:#fff; box-shadow:0 .7rem 1.7rem rgba(27,83,57,.08); }
.home-directions .direction-card:first-child { background:linear-gradient(135deg,#f1fbf5,#fff); }
.home-directions .direction-card:nth-child(2) { background:linear-gradient(135deg,#fffaf0,#fff); }
.direction-icon { width:3.4rem; height:3.4rem; display:grid; place-items:center; border-radius:1.05rem; color:#fff; font-size:1.65rem; font-weight:900; }
.direction-icon-xingce { background:linear-gradient(135deg,#18825a,#34a575); }
.direction-icon-essay { color:#7a5520; background:linear-gradient(135deg,#f2dca7,#fff1c9); }
.home-directions .direction-card small { display:block; margin-top:.35rem; color:var(--green-700); font-weight:800; }
.compact-today { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.8rem 1rem; margin-top:1rem; padding:1rem 1.15rem; }
.today-copy { display:flex; align-items:center; gap:.75rem; }
.today-copy h2 { font-size:1.05rem; }
.today-icon { width:2.55rem; height:2.55rem; display:grid; place-items:center; flex:none; border-radius:.8rem; color:#fff; background:var(--green-700); font-weight:900; }
.home-actions { display:flex; gap:.55rem; }
.home-actions a { padding:.6rem .78rem; border-radius:.72rem; color:#fff; background:var(--green-700); font-size:.86rem; font-weight:800; text-decoration:none; white-space:nowrap; }
.compact-today .progress-track { grid-column:1 / -1; width:100%; margin:0; }
.student-bottom-nav { position:fixed; z-index:50; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(4,1fr); min-height:4.6rem; padding:.45rem max(.6rem,env(safe-area-inset-right)) max(.45rem,env(safe-area-inset-bottom)) max(.6rem,env(safe-area-inset-left)); border-top:1px solid rgba(35,104,73,.12); background:rgba(255,255,255,.96); box-shadow:0 -.5rem 1.5rem rgba(27,74,53,.06); backdrop-filter:blur(14px); }
.student-bottom-nav a { display:grid; place-content:center; justify-items:center; gap:.12rem; min-width:0; color:#75847c; font-size:.72rem; text-decoration:none; }
.student-bottom-nav a span { font-size:1.2rem; line-height:1; }
.student-bottom-nav a b { font-weight:700; }
.student-bottom-nav a.active { color:var(--green-700); }
.student-bottom-nav a.active span { width:2.15rem; height:1.55rem; display:grid; place-items:center; border-radius:999px; background:var(--green-100); }
.direction-brand { display:flex; align-items:center; gap:.65rem; min-width:0; color:var(--green-950); text-decoration:none; }
.home-student-identity { margin-left:auto; color:var(--muted); font-size:.76rem; font-weight:700; }
.direction-brand .brand-logo { width:2.75rem; height:2.75rem; border-radius:.85rem; }
.direction-brand span { min-width:0; }
.direction-brand strong,.direction-brand small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.direction-brand small { color:var(--muted); font-size:.72rem; }
.direction-module-section { margin-top:.65rem; }
.compact-heading { margin:.85rem .15rem; }
.compact-heading h1,.compact-heading p { margin:.12rem 0; }
.compact-heading h1 { color:var(--green-950); font-size:clamp(1.55rem,5vw,2.2rem); }
.compact-heading>p:last-child:not(.eyebrow) { color:var(--muted); }
.direction-module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.direction-module-tile { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.3rem .75rem; min-height:8.8rem; padding:1rem; color:var(--ink); text-decoration:none; box-shadow:0 .55rem 1.35rem rgba(25,74,51,.06); }
.direction-module-tile .module-graphic { grid-row:1 / span 3; width:3rem; height:3rem; display:grid; place-items:center; border-radius:.9rem; color:var(--green-900); background:var(--green-100); font-size:1.15rem; font-weight:900; }
.direction-module-tile h2,.direction-module-tile p,.direction-module-tile small { margin:0; overflow-wrap:anywhere; }
.direction-module-tile h2 { color:var(--green-950); font-size:1.15rem; }
.direction-module-tile p,.direction-module-tile small { color:var(--muted); font-size:.78rem; }
.direction-module-tile .tile-progress { grid-column:1 / -1; height:.42rem; margin-top:.55rem; overflow:hidden; border-radius:999px; background:#e3eee7; }
.direction-module-tile .tile-progress i { display:block; height:100%; border-radius:inherit; background:var(--green-700); }
.essay-module-tile { min-height:10rem; background:linear-gradient(145deg,#fff,#f7fbf8); }
.essay-module-tile:nth-child(2) .module-graphic { color:#79571f; background:#fff0c9; }
.essay-module-tile.is-preparing { opacity:.78; }
.essay-module-tile.is-preparing small { color:var(--green-700); font-weight:800; }
.direction-progress-card { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(8rem,14rem) auto; align-items:center; gap:.85rem; margin-top:1rem; padding:1rem 1.1rem; }
.direction-progress-card h2,.direction-progress-card p { margin:.08rem 0; }
.direction-progress-card h2 small { color:var(--muted); font-size:.75em; }
.direction-progress-card .progress-graphic { width:2.7rem; height:2.7rem; display:grid; place-items:center; border-radius:.85rem; color:#fff; background:var(--green-700); font-weight:900; }
.direction-progress-card .progress-track { margin:0; }
.direction-progress-card>a { color:var(--green-700); font-weight:800; text-decoration:none; white-space:nowrap; }

@media (max-width:700px) {
  .student-shell { width:calc(100% - 1rem); padding-top:max(.55rem,env(safe-area-inset-top)); }
  .home-topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  .home-topbar .topbar-actions { grid-column:2; grid-row:1; }
  .home-topbar .sync-status span { display:none; }
  .home-topbar .student-brand.compact small { display:none; }
  .home-topbar .student-brand.compact strong { font-size:.82rem; }
  .home-topbar .student-brand.compact .brand-logo { width:2.45rem; height:2.45rem; }
  .home-student-identity { grid-column:2; max-width:11.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .home-directions .direction-grid { grid-template-columns:1fr; }
  .home-directions .direction-card { grid-template-columns:3.35rem minmax(0,1fr) auto; align-content:center; min-height:7rem; gap:.65rem; padding:.85rem 1rem; }
  .home-directions .direction-icon { grid-column:auto; width:3rem; height:3rem; font-size:1.35rem; }
  .home-directions .direction-card h3 { font-size:1.12rem; white-space:normal; }
  .home-directions .direction-card p { font-size:.76rem; }
  .home-directions .direction-card small { font-size:.68rem; }
  .home-directions .direction-card>b { align-self:center; }
  .compact-today { grid-template-columns:1fr; }
  .home-actions { width:100%; }
  .home-actions a { flex:1; text-align:center; }
  .direction-topbar { grid-template-columns:auto minmax(0,1fr) auto; }
  .direction-topbar .sync-status { grid-column:auto; justify-self:end; }
  .direction-topbar .sync-status span { display:none; }
  .direction-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .direction-module-tile { display:block; min-height:9.6rem; padding:.85rem; }
  .direction-module-tile .module-graphic { width:2.65rem; height:2.65rem; margin-bottom:.55rem; }
  .direction-module-tile h2 { font-size:1rem; }
  .direction-module-tile p { margin-top:.15rem; font-size:.72rem; }
  .direction-module-tile .tile-progress { margin-top:.55rem; }
  .direction-progress-card { grid-template-columns:auto minmax(0,1fr); }
  .direction-progress-card .progress-track { grid-column:1 / -1; }
  .direction-progress-card>a { grid-column:1 / -1; padding:.62rem; border-radius:.7rem; color:#fff; background:var(--green-700); text-align:center; }
}