:root {
  --ink: #20252e;
  --muted: #7b8089;
  --line: #e8e8e4;
  --paper: #fbfbf8;
  --surface: #ffffff;
  --mint: #d6f0e9;
  --mint-strong: #2f8375;
  --plum: #4c405c;
  --plum-dark: #302839;
  --orange: #d36e45;
  --shadow: 0 18px 42px rgba(49, 43, 54, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, system-ui, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.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; }
.skip-link { position: fixed; left: 18px; top: 10px; z-index: 10; transform: translateY(-160%); background: var(--plum-dark); color: white; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 258px; flex: 0 0 258px; background: var(--plum-dark); color: #f9f7f3; padding: 30px 20px 20px; display: flex; flex-direction: column; min-height: 100vh; }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 10px; }
.brand-mark { height: 28px; width: 29px; display: flex; gap: 3px; align-items: end; }
.brand-mark span { display: block; width: 7px; border-radius: 7px 7px 3px 3px; background: #ddf1e9; transform: rotate(30deg); }
.brand-mark span:nth-child(1) { height: 16px; margin-bottom: 1px; }
.brand-mark span:nth-child(2) { height: 25px; background: #b3e2d6; }
.brand-mark span:nth-child(3) { height: 19px; background: #e3a28a; margin-bottom: 1px; }
.brand-name { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.7px; }
.brand-tagline { margin: 0; color: #b7afc0; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-family: 'DM Mono', monospace; }
.workspace-switcher { margin-top: 48px; }
.eyebrow { color: #a4a0aa; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .11em; }
.workspace-button, .profile-button { width: 100%; border: 0; color: inherit; background: transparent; display: flex; align-items: center; text-align: left; gap: 10px; padding: 12px 9px; border-radius: 10px; }
.workspace-button:hover, .profile-button:hover { background: rgba(255,255,255,.06); }
.workspace-avatar, .profile-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; font-weight: 800; font-size: 10px; background: #d9f0e8; color: #316e64; }
.workspace-copy, .profile-button > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.workspace-copy strong, .profile-button strong { font-size: 11px; font-weight: 700; }
.workspace-copy small, .profile-button small { color: #aaa4b2; font-size: 10px; }
.chevron, .more { color: #aaa4b2; font-size: 18px; }
.nav-list { display: grid; gap: 4px; margin-top: 22px; }
.nav-item { color: #bcb6c4; text-decoration: none; padding: 10px 11px; border-radius: 8px; display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 12px; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: #594d68; box-shadow: inset 3px 0 #a8dbcc; }
.nav-icon { color: #cac3d1; font-size: 17px; width: 17px; line-height: 1; text-align: center; }
.nav-count { margin-left: auto; background: #71647f; padding: 2px 7px; border-radius: 15px; color: #ece7ef; font-size: 10px; }
.sidebar-divider { height: 1px; background: rgba(255,255,255,.1); margin: 30px 10px 22px; }
.nav-section-label { margin: 0 11px; color: #827989; font: 10px 'DM Mono', monospace; letter-spacing: .11em; }
.sidebar-bottom { margin-top: auto; }
.plan-card { margin: 28px 4px 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); padding: 13px; border-radius: 10px; }
.plan-card-head { display: flex; justify-content: space-between; color: #dfd9e2; font-size: 10px; font-weight: 700; margin-bottom: 12px; }
.plan-status { color: #aadccc; font: 9px 'DM Mono', monospace; }
.progress-track { background: rgba(255,255,255,.1); height: 5px; border-radius: 8px; overflow: hidden; }
.progress-track span { display: block; background: #a9dfcf; height: 100%; border-radius: inherit; }
.plan-card p { margin: 9px 0 0; font-size: 10px; color: #a9a2b2; }
.plan-card strong { color: #efe9f1; }
.profile-button { padding: 9px 4px; }
.profile-avatar { background: #f2d6c9; color: #92563f; border-radius: 50%; }

.main-content { flex: 1; min-width: 0; }
.topbar { height: 76px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 5.2vw; background: rgba(251,251,248,.95); }
.breadcrumb { color: #a2a2a0; font-size: 11px; display: flex; gap: 11px; align-items: center; }
.breadcrumb strong { color: #45454b; font-weight: 700; }
.breadcrumb-separator { color: #ceccc8; }
.topbar-actions { display: flex; gap: 15px; align-items: center; }
.icon-button, .help-button { border: 0; background: transparent; color: #777a80; }
.icon-button { position: relative; font-size: 19px; }
.icon-button i { position: absolute; width: 5px; height: 5px; background: var(--orange); border: 2px solid var(--paper); border-radius: 50%; top: -1px; right: -2px; }
.help-button { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; }
.help-button span { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #c7c8c7; border-radius: 50%; font-size: 11px; }
.page-wrap { max-width: 1240px; padding: 52px 5.2vw 54px; margin: 0 auto; }
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.accent { color: var(--mint-strong); }
.welcome-row h1 { font-size: clamp(27px, 3vw, 36px); letter-spacing: -1.5px; margin: 10px 0 9px; line-height: 1.05; }
.welcome-row h1 span { color: var(--orange); font-size: .65em; vertical-align: top; margin-left: 5px; }
.welcome-subtitle { color: #82858a; margin: 0; font-size: 13px; }
.primary-button, .secondary-button { border-radius: 7px; padding: 12px 17px; font-weight: 800; border: 0; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .18s, background .18s; }
.primary-button { background: var(--plum); color: #fff; box-shadow: 0 6px 18px rgba(76,64,92,.18); }
.primary-button:hover { background: #594b68; transform: translateY(-1px); }
.secondary-button { background: #fff; color: #58545d; border: 1px solid var(--line); }
.secondary-button:hover { background: #faf9f7; border-color: #cbc9c8; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 29px; }
.stat-card, .panel { background: var(--surface); border: 1px solid #eaeae7; border-radius: 11px; box-shadow: var(--shadow); }
.stat-card { padding: 19px 20px 17px; }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; }
.stat-label { font: 10px 'DM Mono', monospace; letter-spacing: .07em; color: #949497; }
.stat-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; }
.stat-icon.mint { background: #e5f5ef; color: #52988a; }.stat-icon.lilac { background: #eee9f5; color: #826b9a; }.stat-icon.peach { background: #f9e9e1; color: #c27859; }
.stat-value { font-size: 30px; letter-spacing: -1px; font-weight: 800; margin: 15px 0 8px; }
.stat-trend { font-size: 10px; margin: 0; color: #5ca08d; }.stat-trend span:first-child { font-size: 14px; margin-right: 3px; }.stat-trend.neutral { color: #8a8b90; }.stat-trend .muted { color: #b1b1b2; }
.workspace-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 13px; margin-bottom: 37px; }
.panel { padding: 23px 24px 20px; }
.panel-heading, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.panel h2, .section-heading h2 { margin: 7px 0 0; font-size: 20px; letter-spacing: -.5px; }
.panel-intro { color: #8c8e92; font-size: 11px; line-height: 1.6; margin: 12px 0 18px; max-width: 420px; }
.step-badge { display: grid; place-items: center; width: 28px; height: 28px; background: #f0f8f4; border-radius: 50%; color: var(--mint-strong); font: 10px 'DM Mono', monospace; }
.dropzone { min-height: 163px; border: 1.5px dashed #c9ddd6; background: #f8fbf9; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: #697a76; font-size: 11px; outline: none; }
.dropzone:focus, .dropzone.dragover { border-color: var(--mint-strong); background: #f0faf5; box-shadow: 0 0 0 3px rgba(84, 153, 137, .12); }
.dropzone strong { color: #4e5956; font-size: 12px; margin-top: 6px; }.dropzone small { color: #a1aba7; font-size: 9px; margin-top: 9px; }
.upload-icon { color: var(--mint-strong); border: 1px solid #bfe2d7; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; }
.inline-button, .text-button { border: 0; background: transparent; color: var(--mint-strong); font-weight: 800; padding: 0; font-size: inherit; }.inline-button:hover, .text-button:hover { text-decoration: underline; }
.recent-upload { display: flex; align-items: center; gap: 10px; background: #fcfcfa; border-top: 1px solid #eee; margin: 19px -24px -20px; padding: 11px 24px; }.file-type { width: 28px; height: 29px; border-radius: 6px; display: grid; place-items: center; font: 8px 'DM Mono', monospace; font-weight: 500; }.file-type.pdf { color: #b5644b; background: #f7e9e2; }.file-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; }.file-copy strong { font-size: 10px; }.file-copy span { font-size: 9px; color: #a5a5a5; }.file-check { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: #def2e9; color: #418d7c; font-size: 11px; }.dots-button { border: 0; background: transparent; color: #a2a2a2; letter-spacing: 2px; font-size: 12px; padding: 5px; }
.profile-panel { display: flex; flex-direction: column; }.profile-panel .panel-heading { align-items: center; }.profile-list { display: grid; gap: 2px; margin: 3px 0 13px; }.student-row { display: flex; align-items: center; gap: 10px; background: transparent; border: 0; text-align: left; padding: 9px 4px; border-radius: 7px; width: 100%; }.student-row:hover { background: #faf9f8; }.student-avatar { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 9px; }.student-avatar.sky { color: #487b91; background: #dceef3; }.student-avatar.coral { color: #985d63; background: #f5dfe1; }.student-avatar.gold { color: #9a7445; background: #f6ead1; }.student-copy { flex: 1; display: flex; flex-direction: column; gap: 4px; }.student-copy strong { color: #48474c; font-size: 11px; }.student-copy small { color: #929298; font-size: 9px; }.dot { width: 5px; height: 5px; display: inline-block; border-radius: 50%; margin-right: 3px; }.dot.blue { background: #73aac1; }.dot.purple { background: #a580bf; }.dot.green { background: #73af94; }.row-arrow { color: #a6a6a6; font-size: 15px; }.full-width { width: 100%; padding: 10px; font-size: 11px; }
.lesson-section { margin-bottom: 34px; }.section-heading { align-items: end; margin-bottom: 17px; }.section-heading .text-button { margin-bottom: 3px; font-size: 11px; }.lesson-table-wrap { background: white; border: 1px solid #eaeae7; border-radius: 11px; box-shadow: var(--shadow); overflow-x: auto; }.lesson-table { width: 100%; border-collapse: collapse; min-width: 720px; }.lesson-table th { color: #a3a2a1; font: 9px 'DM Mono', monospace; letter-spacing: .08em; font-weight: 500; text-align: left; padding: 13px 20px; border-bottom: 1px solid #efefec; }.lesson-table td { padding: 14px 20px; border-bottom: 1px solid #f0f0ed; font-size: 10px; }.lesson-table tr:last-child td { border-bottom: 0; }.lesson-name { display: flex; gap: 10px; align-items: center; }.lesson-color { width: 7px; height: 31px; border-radius: 6px; }.lesson-color.teal { background: #92d2c1; }.lesson-color.violet { background: #c2a8d6; }.lesson-color.orange { background: #e6ad87; }.lesson-name span:last-child { display: flex; flex-direction: column; gap: 4px; }.lesson-name strong { font-size: 11px; color: #44454a; }.lesson-name small { font-size: 9px; color: #a4a4a4; }.class-pill { background: #f5f5f2; color: #77787c; padding: 5px 8px; border-radius: 4px; white-space: nowrap; }.resource-icons { display: flex; gap: 5px; }.resource { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 5px; background: #e8f5f0; color: #4e9b8b; font-size: 12px; }.resource.pending { color: #b98762; background: #fbefe6; }.resource.muted-resource { color: #aaa; background: #f3f3f2; }.updated { color: #7f8082; white-space: nowrap; }
.insight-banner { display: flex; align-items: flex-start; gap: 13px; background: #eff8f4; border: 1px solid #d6ece3; border-radius: 9px; padding: 15px 18px; position: relative; }.insight-mark { color: #5ba290; background: white; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; flex: 0 0 27px; }.insight-banner strong { font-size: 11px; color: #3f7167; }.insight-banner p { margin: 4px 0 0; color: #73948c; font-size: 10px; line-height: 1.5; }.close-banner { margin-left: auto; border: 0; background: transparent; color: #7ba99e; font-size: 18px; padding: 0 2px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(42,35,47,.45); display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px); }.modal-backdrop[hidden] { display: none; }.modal { width: min(480px, 100%); background: #fff; border-radius: 13px; padding: 29px; box-shadow: 0 26px 80px rgba(22,17,27,.2); position: relative; }.modal-close { border: 0; background: transparent; color: #999; font-size: 24px; position: absolute; right: 17px; top: 12px; }.modal-step { color: var(--mint-strong); font: 10px 'DM Mono', monospace; letter-spacing: .08em; }.modal-step span { color: #c7c7c7; margin: 0 4px; }.modal h2 { font-size: 24px; letter-spacing: -.8px; margin: 13px 0 8px; }.modal > p { color: #83858a; line-height: 1.6; font-size: 12px; margin-bottom: 23px; }.field-label { display: block; color: #55555a; font-size: 11px; font-weight: 800; margin: 14px 0 7px; }.text-input { width: 100%; border: 1px solid #dfdfdc; border-radius: 7px; padding: 11px 12px; color: var(--ink); outline: none; font-size: 12px; }.text-input:focus { border-color: var(--mint-strong); box-shadow: 0 0 0 3px rgba(84,153,137,.12); }.textarea { resize: vertical; min-height: 76px; }.modal-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }.toast { position: fixed; z-index: 30; right: 24px; bottom: 24px; background: var(--plum-dark); color: white; border-radius: 8px; padding: 12px 16px; font-size: 11px; box-shadow: 0 12px 30px rgba(0,0,0,.18); transform: translateY(130px); opacity: 0; transition: .25s ease; pointer-events: none; }.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 980px) { .sidebar { width: 220px; flex-basis: 220px; }.workspace-grid { grid-template-columns: 1fr; }.page-wrap { padding-left: 4vw; padding-right: 4vw; }.topbar { padding: 0 4vw; } }
@media (max-width: 720px) { .app-shell { display: block; }.sidebar { width: 100%; min-height: auto; padding: 16px 18px; }.workspace-switcher, .sidebar-divider, .nav-section-label, .sidebar-bottom { display: none; }.brand-lockup { padding: 0; }.nav-list { display: flex; overflow-x: auto; margin: 16px 0 0; gap: 3px; }.nav-item { white-space: nowrap; padding: 8px 10px; }.nav-item.active { box-shadow: inset 0 -2px #a8dbcc; }.topbar { height: 60px; }.page-wrap { padding-top: 34px; }.welcome-row { align-items: flex-start; flex-direction: column; gap: 20px; }.welcome-row .primary-button { width: 100%; }.stat-grid { grid-template-columns: 1fr; gap: 9px; }.stat-card { padding: 15px 17px; }.stat-value { margin: 10px 0 5px; }.panel { padding: 18px; }.recent-upload { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }.lesson-table th, .lesson-table td { padding-left: 13px; padding-right: 13px; }.help-button { display: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; } }
.review-action { color: var(--mint-strong); font-size: 10px; font-weight: 800; text-decoration: none; }.review-action:hover { text-decoration: underline; }
.empty-table-cell { color: #999b9d; text-align: center; padding: 28px 20px !important; }