/* Learning comes first; personal work retains the familiar four groups. */
#learner-home { max-width:1600px; margin:auto; padding:28px 32px 0; }
.luyen-app .learner-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; background:transparent!important; }
.learner-today { color:var(--ai-brand); font-size:13px; padding:0 8px; white-space:nowrap; }
.learner-heading h1 { font-size:28px; font-weight:650; letter-spacing:-.6px; line-height:1.25; }
.learner-heading p { color:var(--ai-muted); margin-top:6px; }
.learner-profile { color:var(--ai-brand); font-size:13px; padding:0 8px; }
.learning-today { background:var(--ai-surface); border:1px solid var(--ai-line); border-radius:12px; overflow:hidden; }
.learning-title-row { display:flex; align-items:center; justify-content:space-between; padding:18px 22px 12px; gap:12px; }
.learning-title-row h2 { font-size:19px; font-weight:650; }
#learning-progress { color:var(--ai-brand); font-weight:650; white-space:nowrap; }
.learning-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0 6px; }
.learning-step { padding:10px 16px 14px; min-width:0; }
.learning-step + .learning-step { border-left:1px solid var(--ai-line); }
.learning-step-heading { display:flex; align-items:center; gap:9px; }
.learning-step h3 { font-size:17px; font-weight:650; }
.step-number { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; border:1px solid var(--ai-line); border-radius:50%; color:var(--ai-muted); font-size:13px; }
.learning-step.next .step-number { border-color:var(--ai-brand); color:var(--ai-brand); }
.learning-step.complete .step-number { background:var(--ai-success); border-color:var(--ai-success); color:var(--ai-surface); }
.learning-state { margin-left:auto; color:var(--ai-muted); font-size:12px; white-space:nowrap; }
.learning-step.complete .learning-state { color:var(--ai-success); }
.activity-description { color:var(--ai-muted); font-size:13px; margin:10px 0 14px; min-height:40px; max-width:40ch; }
.learning-buttons { display:flex; gap:8px; flex-wrap:wrap; }
.learning-buttons button { font-size:13px; padding:0 14px; }
.secondary-button { border:1px solid var(--ai-line); border-radius:7px; color:var(--ai-brand); }
.learning-done { color:var(--ai-success); text-decoration:underline; text-underline-offset:3px; }
.learning-footnote { padding:10px 22px; border-top:1px solid var(--ai-line); color:var(--ai-muted); font-size:12px; }
.learning-return { padding:8px 0 0; color:var(--ai-brand); font-size:13px; }
.learning-return button { padding:0 8px; text-decoration:underline; }
.learning-history { border-bottom:1px solid var(--ai-line); margin-top:10px; }
.learning-history summary { display:flex; align-items:center; gap:14px; padding:6px 0; font-size:13px; list-style:none; }
.learning-history strong { color:var(--ai-success); font-weight:600; }
.history-link { margin-left:auto; color:var(--ai-brand); text-decoration:underline; text-underline-offset:3px; }
.learning-history p { color:var(--ai-muted); font-size:13px; max-width:80ch; margin:8px 0 14px; }
.history-grid { display:grid; grid-template-columns:repeat(15,minmax(0,1fr)); gap:6px; }
.history-day { display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid var(--ai-line); border-radius:6px; color:var(--ai-muted); min-height:52px!important; }
.history-day small { font-size:10px; }
.history-day.partial { border-color:var(--ai-brand); color:var(--ai-brand); background:var(--ai-soft); }
.history-day.full { background:var(--ai-success); border-color:var(--ai-success); color:var(--ai-surface); }
.history-day.full span::before { content:'✓ '; }
.history-day.partial span::before { content:'• '; }
.history-day[aria-current=date] { outline:2px solid var(--ai-brand); outline-offset:1px; }
.history-legend { display:flex; flex-wrap:wrap; gap:14px; }
.welcome-note { padding:16px 20px; border-left:3px solid var(--ai-brand); background:var(--ai-soft); margin-bottom:18px; font-size:14px; }
.welcome-note ol { list-style:decimal; margin:8px 0 4px 20px; color:var(--ai-muted); }
.welcome-note button { color:var(--ai-brand); font-weight:600; }
#backup-reminder { color:var(--ai-muted); font-size:12px; line-height:1.5; padding:4px 12px; }
.learner-menu-item { display:block; width:100%; text-align:left; padding:8px 12px; font-size:13px; color:var(--ai-ink); }
#learner-profile-modal input { width:100%; padding:10px; border:1px solid var(--ai-line); border-radius:7px; background:var(--ai-surface); color:var(--ai-ink); }
#learner-profile-modal a { display:inline-flex; align-items:center; min-height:44px; color:var(--ai-brand); text-decoration:underline; }
.day-overview { position:relative; margin-bottom:18px; }
.day-overview h2 { font-size:23px; font-weight:650; line-height:1.25; margin-bottom:6px; }
.week-strip { top:65px; right:0; }
html body.luyen-app #matrix-container { min-height:0; }
.day-workspace { padding-top:24px; }
html body.luyen-app .zen-header { min-height:60px; padding-top:6px; padding-bottom:6px; }
.modal-header-title { text-transform:none!important; letter-spacing:normal!important; }
@media(max-width:900px) {
 .learning-state { display:none; }
 .learning-step { padding:10px 12px 14px; }
 .learning-buttons { gap:2px; }
 .learning-buttons button { padding:0 10px; }
}
@media(max-width:600px) {
 html body.luyen-app .zen-header { padding:2px 12px; min-height:48px; gap:4px; }
 .luyen-app .header-brand-group { grid-template-columns:28px 1fr; align-items:center; gap:7px; }
 .luyen-app .brand-logo-icon { width:28px; height:28px; grid-row:auto; border-radius:8px; }
 .luyen-app .brand-title-text { font-size:17px; }
 .brand-description { display:none; }
 #btn-theme-toggle { display:none; }
 html body.luyen-app .workspace-navigation { padding:0 12px; flex-wrap:nowrap; gap:2px; }
 html body.luyen-app .view-switcher-group { gap:10px; flex-shrink:0; }
 html body.luyen-app .view-switcher-group :is(#btn-view-matrix,#btn-view-graph) { font-size:12px; min-height:44px; gap:0; }
 html body.luyen-app .date-navigator-group { gap:0; flex-shrink:1; min-width:0; }
 html body.luyen-app .date-navigator-group>div { padding:0; min-width:66px; flex-shrink:0; }
 html body.luyen-app #current-date-label { display:block; text-align:center; font-size:11px; }
 html body.luyen-app #btn-date-today { display:none!important; }
 #learner-home { padding:18px 16px 0; }
 .learner-heading { margin-bottom:16px; align-items:flex-start; }
 .learner-heading h1 { font-size:23px; }
 .learner-heading p { font-size:13px; }
 .learner-profile { display:none; }
 .learning-title-row { padding:12px 12px 4px; }
 .learning-title-row h2 { font-size:17px; }
 #learning-progress { font-size:13px; }
 .learning-steps { display:flex; flex-direction:column; padding:0 12px; }
 .learning-step { display:grid; grid-template-columns:1fr auto; gap:4px 8px; padding:9px 0; align-items:center; }
 .learning-step + .learning-step { border-left:0; border-top:1px solid var(--ai-line); }
 .learning-step-heading { display:grid; grid-template-columns:24px 1fr; gap:0 7px; }
 .learning-step-heading .step-number { grid-row:1/3; }
 .learning-state { display:block; grid-column:2; margin:0; font-size:11px; }
 .learning-step h3 { font-size:15px; }
 .step-number { width:24px; height:24px; font-size:12px; }
 .activity-description { display:none; }
 .learning-buttons { gap:0; flex-wrap:nowrap; }
 .learning-buttons button { padding:0 8px; font-size:12px; }
 .learning-footnote { padding:9px 12px; font-size:11px; }
 .learning-return { grid-column:1/-1; padding:0; }
 .learning-history summary { gap:8px; font-size:12px; }
 .history-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
 .welcome-note { padding:12px; font-size:13px; }
 .welcome-note ol { margin-left:16px; }
 .day-workspace { padding-top:18px; }
 .day-overview h2 { font-size:22px; }
 .day-overview { gap:10px; margin-bottom:14px; }
 .week-strip { top:100%; width:100%; right:0; }
 #storage-status.storage-error { top:92px; }
}
@media(max-width:374px) {
 html body.luyen-app .workspace-navigation { flex-wrap:wrap; }
 html body.luyen-app .date-navigator-group { margin-left:auto; }
 .learning-step { grid-template-columns:1fr; }
 .learning-buttons { padding-left:30px; }
}