.cc-root { --cc-soft:#edf2e6; --cc-muted:#7c8b80; color:var(--ink,#213b32); }
.cc-root button,.cc-root input,.cc-root textarea { font:inherit; }
.cc-eyebrow { color:#7a8b6a; font-size:10px; letter-spacing:.13em; font-weight:600; margin-bottom:9px; }
.cc-auth-wrap { display:grid; grid-template-columns:minmax(350px,1.05fr) minmax(440px,1fr); min-height:100vh; }
.cc-auth-story { padding:42px 54px 28px; background:#e9efdf; min-height:720px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.cc-wordmark { display:flex; align-items:center; gap:12px; font-size:23px; text-decoration:none; font-weight:400; position:relative; z-index:2; }
.cc-wordmark svg { background:#214e43; color:#e7efdd; padding:9px; width:42px; height:42px; border-radius:12px; }
.cc-wordmark b { font-weight:650; }
.cc-auth-story-copy { position:relative; z-index:2; margin-top:100px; }
.cc-auth-story-copy h1 { font-size:clamp(34px,3.2vw,50px); line-height:1.45; letter-spacing:-.06em; font-weight:550; margin:15px 0 20px; }
.cc-auth-story-copy h1 span { color:#9bb26f; }
.cc-auth-story-copy>p { color:#778570; font-size:14px; line-height:2; }
.cc-story-features { display:flex; flex-wrap:wrap; gap:14px; color:#758769; font-size:10px; margin-top:28px; }
.cc-story-features span { display:flex; align-items:center; gap:5px; }
.cc-story-features svg { width:14px; height:14px; }
.cc-auth-bottom { position:relative; z-index:2; color:#819174; font-size:11px; display:flex; justify-content:space-between; margin-top:auto; padding-top:220px; }
.cc-auth-art { position:absolute; bottom:80px; right:18%; transform:rotate(-10deg); width:210px; height:165px; }
.cc-auth-art i { width:52px; height:143px; background:#bacb94; position:absolute; border-radius:5px 12px 10px 5px; border-left:5px solid #a4b584; transform:rotate(13deg); top:0; left:40px; box-shadow:5px 8px 0 #b6c39130; }
.cc-auth-art i:nth-child(2) { background:#4a7351; border-color:#3e6446; top:17px; left:105px; transform:rotate(29deg); }
.cc-auth-art i:nth-child(3) { background:#d6daa8; border-color:#c2c794; top:28px; left:164px; transform:rotate(44deg); }
.cc-auth-art>span { position:absolute; top:38px; left:-115px; font-size:9px; color:#8a9a78; letter-spacing:.15em; line-height:1.9; transform:rotate(10deg); }
.cc-auth-panel { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px 50px 24px; background:#fafbf8; }
.cc-auth-card { width:100%; max-width:385px; padding-top:20px; }
.cc-auth-card h2 { font-size:26px; margin-bottom:10px; }
.cc-auth-card>.muted { font-size:12px; }
.cc-mode { display:flex; padding:4px; background:#edf0e9; border-radius:10px; margin:27px 0 22px; }
.cc-mode button { flex:1; border:0; border-radius:7px; background:transparent; padding:10px 12px; font-size:12px; color:#86917e; }
.cc-mode button.active { color:#2d5341; background:white; box-shadow:0 2px 5px #334d2110; font-weight:600; }
.cc-field { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:500; color:#49604f; margin-bottom:16px; position:relative; }
.cc-field input,.cc-field textarea { width:100%; padding:12px 13px; border:1px solid #dfe5da; border-radius:8px; background:white; color:#334c3d; font-size:12px; line-height:1.5; }
.cc-field input:focus,.cc-field textarea:focus { border-color:#95ad7c; box-shadow:0 0 0 3px #c9d5b330; }
.cc-field textarea { resize:vertical; min-height:90px; }
.cc-root fieldset { border:0; padding:0; margin:0; min-width:0; }
.cc-root fieldset:disabled { opacity:.64; }
.cc-auth-submit { min-height:43px; margin-top:5px; justify-content:center; }
.cc-auth-switch { text-align:center; color:#8d9889; font-size:11px; margin-top:18px; }
.cc-auth-switch button,.cc-text-button { border:0; background:none; color:#426548; padding:2px 5px; font-size:11px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.cc-security-note { display:flex; gap:9px; font-size:10px; color:#97a18f; line-height:1.8; margin-top:28px; padding-top:18px; border-top:1px solid #e8ece2; }
.cc-security-note svg { width:15px; height:15px; margin-top:2px; color:#94a280; }
.cc-auth-footer { margin-top:42px; font-size:9px; color:#a8b09f; text-align:center; }
.cc-alert { display:flex; align-items:flex-start; gap:11px; border:1px solid; border-radius:11px; padding:13px 15px; font-size:11px; margin-bottom:18px; line-height:1.8; }
.cc-alert strong { display:block; font-size:12px; font-weight:600; }
.cc-alert svg { margin-top:3px; width:17px; height:17px; }
.cc-warning { background:#f7f3e8; color:#8b794e; border-color:#eae1c9; }
.cc-error { color:#a65c4d; background:#fcf1ed; border-color:#efd9cf; }
.cc-success { color:#4c7045; background:#eef4e7; border-color:#dbe6cc; }
.cc-preview { margin-top:18px; font-size:11px; }
.cc-preview-note { color:#9ba58f; font-size:9px; margin-top:8px; text-align:center; }
.cc-password-reset { display:block; margin:14px auto 0; }
.cc-pending { max-width:580px; margin:64px auto; padding:32px; }
.cc-pending h1 { font-size:24px; margin:15px 0 10px; }
.cc-pending form { margin-top:23px; }
.cc-activation { border-top:1px solid var(--line,#e6eae3); margin-top:26px; padding-top:20px; }
.cc-activation summary { font-size:12px; cursor:pointer; color:#6e8266; }
.cc-activation p { margin-top:12px; font-size:11px; }
.cc-tabs { display:flex; gap:23px; border-bottom:1px solid #e2e8db; margin-bottom:24px; overflow-x:auto; }
.cc-tabs button { background:none; border:0; border-bottom:2px solid transparent; padding:11px 2px 13px; font-size:12px; color:#8c9984; white-space:nowrap; }
.cc-tabs button.active { border-color:#3f674b; color:#335b41; font-weight:600; }
.cc-loading { background:#fff; padding:70px 20px; text-align:center; border-radius:16px; border:1px solid #e6eae3; color:#8c9981; font-size:12px; }
.cc-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:24px; }
.cc-stat { padding:20px; border:1px solid #e3e8dc; border-radius:14px; background:white; position:relative; }
.cc-stat-icon { float:right; width:31px; height:31px; display:grid; place-items:center; background:#eff3e9; color:#809a6e; border-radius:10px; }
.cc-stat-icon svg { width:17px; height:17px; }
.cc-stat>p { color:#8c9784; font-size:11px; margin-top:1px; }
.cc-stat>strong { display:block; font-size:30px; line-height:1.4; font-weight:500; margin-top:11px; }
.cc-stat>small { font-size:9px; color:#a1aa97; display:block; margin-top:4px; }
.cc-overview-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:22px; margin-bottom:30px; }
.cc-next-step { background:#edf2e4; border-color:#dce5cf; }
.cc-next-step h2 { margin:8px 0 11px; font-size:21px; }
.cc-next-step p { font-size:11px; max-width:440px; line-height:1.9; }
.cc-skill-pills { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 24px; }
.cc-module { display:inline-flex; flex-direction:column; font-size:8px; color:#82906e; border-right:1px solid #d5dfc8; padding:0 17px 0 0; margin-right:9px; letter-spacing:.02em; }
.cc-module:last-child { border:0; }
.cc-module b { font-size:13px; color:#587346; font-weight:500; margin-bottom:3px; }
.cc-invite-card>p { font-size:11px; line-height:1.9; }
.cc-invite-code { background:#f5f7f0; border:1px dashed #d7e0cc; border-radius:10px; padding:14px; font-size:19px; letter-spacing:.09em; color:#486743; text-align:center; margin:17px 0 13px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; word-break:break-all; }
.cc-inline-actions { display:flex; align-items:center; gap:9px; }
.cc-help { display:block; font-size:10px; color:#94a088; line-height:1.8; }
.cc-invite-card>.cc-help { margin-top:12px; }
.cc-empty { padding:34px 20px; text-align:center; color:#8b9980; }
.cc-empty>svg { margin-bottom:13px; width:29px; height:29px; color:#9caf85; }
.cc-empty h3 { font-size:15px; color:#6c825c; margin-bottom:8px; }
.cc-empty p { font-size:11px; margin-bottom:15px; }
.cc-empty small { display:block; font-size:10px; }
.cc-assignment-list { display:grid; gap:20px; }
.cc-assignment-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:14px; }
.cc-assignment-heading h2 { margin-top:11px; font-size:19px; }
.cc-assignment-meta { display:flex; align-items:center; gap:12px; font-size:10px; color:#a1ab96; }
.cc-due { display:flex; align-items:center; gap:5px; color:#8b9980; font-size:10px; white-space:nowrap; padding-top:5px; }
.cc-due svg { width:14px; height:14px; }
.cc-due.overdue { color:#b3845e; }
.cc-instructions { font-size:11px; color:#849278; line-height:1.9; white-space:pre-wrap; margin-bottom:18px; }
.cc-progress-label { display:flex; justify-content:space-between; font-size:10px; color:#99a38f; margin:17px 0 7px; }
.cc-progress-label b { color:#678154; font-weight:500; }
.cc-progress { background:#edf1e6; height:5px; border-radius:6px; overflow:hidden; margin-bottom:20px; }
.cc-progress i { height:100%; display:block; background:#99b572; border-radius:6px; transition:width .3s; }
.cc-assignment-items { border-top:1px solid #edf0e8; }
.cc-assignment-item { display:flex; gap:13px; align-items:center; padding:15px 0; border-bottom:1px solid #edf0e8; }
.cc-assignment-item>div { flex:1; min-width:0; }
.cc-assignment-item h3 { font-size:12px; line-height:1.7; margin-top:2px; }
.cc-skill-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; font-size:19px; background:#edf1e6; color:#7b9563; flex:0 0 auto; }
.cc-skill-icon.listening { background:#edf1e6; color:#829d6b; }.cc-skill-icon.reading { background:#f2eee3; color:#a58f5d; }.cc-skill-icon.writing { background:#e9eef2; color:#7a99ad; }.cc-skill-icon.speaking { background:#f2eaf0; color:#a47f9d; }
.cc-item-module { color:#a6af9b; font-size:8px; letter-spacing:.04em; }
.cc-item-status { display:flex; align-items:center; gap:4px; color:#a3ad98; font-size:10px; white-space:nowrap; }
.cc-item-status svg { width:13px; height:13px; }
.cc-item-status.done { color:#6e9259; }
.cc-acknowledge { display:flex; align-items:center; gap:4px; margin-top:17px; margin-left:auto; }
.cc-acknowledge svg { width:14px; height:14px; }
.cc-assignment-teacher-meta { display:flex; gap:18px; font-size:10px; color:#9aa58d; margin:13px 0; }
.cc-student-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:20px; align-items:start; }
.cc-roster { padding:21px 17px; }
.cc-roster .panel-head { padding:0 5px; }
.cc-student-row { display:flex; align-items:center; width:100%; text-align:left; gap:10px; padding:12px 9px; border:0; background:none; border-radius:10px; margin-top:4px; }
.cc-student-row:hover { background:#f5f7f0; }.cc-student-row.active { background:#edf3e5; }
.cc-person-avatar { width:34px; height:34px; border-radius:50%; background:#e6eddc; color:#7c9364; display:grid; place-items:center; flex:0 0 auto; font-size:12px; }
.cc-person-avatar.large { width:48px; height:48px; font-size:19px; }
.cc-student-row>span:nth-child(2) { min-width:0; flex:1; }
.cc-student-row b { display:block; font-size:11px; font-weight:500; }
.cc-student-row small { display:block; color:#9da992; font-size:9px; overflow:hidden; text-overflow:ellipsis; }
.cc-student-row>svg { width:14px; height:14px; color:#a1ae94; }
.cc-student-detail-head { display:flex; align-items:center; gap:13px; }
.cc-student-detail-head h2 { font-size:20px; margin-bottom:4px; }
.cc-student-detail-head p { font-size:10px; word-break:break-all; }
.cc-mini-stats { display:flex; gap:0; margin:23px 0; padding:16px 0; background:#f6f8f1; border-radius:11px; }
.cc-mini-stats>span { flex:1; text-align:center; color:#a1ad94; font-size:9px; border-right:1px solid #e3e9da; }
.cc-mini-stats>span:last-child { border:0; }
.cc-mini-stats b { display:block; color:#6a8354; font-size:21px; font-weight:500; margin-bottom:4px; }
.cc-detail-section { margin-top:25px; }
.cc-detail-section>h3 { font-size:13px; margin-bottom:13px; }
.cc-detail-progress { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:11px; padding:9px 0; border-bottom:1px solid #edf0e6; }
.cc-attempt { border:1px solid #e7ebdf; border-radius:10px; overflow:hidden; margin-bottom:10px; }
.cc-attempt>summary { display:flex; align-items:center; gap:9px; padding:12px; cursor:pointer; background:#fafbf7; }
.cc-attempt>summary>span:nth-child(2) { flex:1; min-width:0; }
.cc-attempt>summary strong { display:block; font-weight:500; font-size:11px; }
.cc-attempt>summary small { display:block; font-size:9px; color:#a2ac96; margin-top:4px; }
.cc-attempt>summary>b { font-size:12px; color:#8a9b73; font-weight:500; white-space:nowrap; }
.cc-attempt-body { padding:16px; }
.cc-attempt-body>h4 { font-size:12px; margin-bottom:8px; }
.cc-attempt-body>.cc-help { margin:5px 0 13px; }
.cc-essay { background:#f8faf5; border:1px solid #e8edde; padding:15px; border-radius:8px; margin:12px 0 22px; white-space:pre-wrap; font-size:12px; color:#66795a; line-height:1.9; }
.cc-existing-feedback { padding:12px; background:#eef4e7; font-size:11px; margin-bottom:18px; border-radius:8px; }
.cc-existing-feedback p { white-space:pre-wrap; margin-top:5px; }
.cc-answer-line { display:flex; gap:8px; border-bottom:1px solid #eef1e9; padding:10px 0; font-size:10px; }
.cc-answer-line>span:nth-child(2) { flex:1; }.cc-answer-line small { display:block; font-size:9px; color:#9da991; margin-top:5px; }
.cc-correct { color:#80a165; }.cc-incorrect { color:#b79068; white-space:nowrap; }
.cc-recording { background:#f8faf5; border:1px solid #e8edde; border-radius:10px; padding:13px; margin-bottom:10px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cc-recording>div { flex:1; min-width:150px; }.cc-recording strong { font-size:11px; font-weight:500; }.cc-recording small { display:block; font-size:9px; color:#9ba98d; margin-top:4px; }
.cc-recording audio { height:36px; max-width:100%; width:100%; }.cc-recording>p { width:100%; font-size:10px; color:#91a180; white-space:pre-wrap; }
.cc-compose { max-width:1100px; }
.cc-compose-head { border-bottom:1px solid #e9edde; padding-bottom:22px; margin-bottom:24px; }
.cc-compose-head h2 { margin:13px 0 10px; font-size:21px; }.cc-compose-head p { font-size:11px; max-width:670px; line-height:1.9; }
.cc-compose-fields { display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
.cc-optional { position:absolute; right:0; top:0; font-size:9px; color:#a7b09c; font-weight:400; }
.cc-catalog-head { display:flex; align-items:center; justify-content:space-between; margin:24px 0 15px; gap:15px; }.cc-catalog-head h3 { font-size:13px; }
.cc-assignment-catalog { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cc-catalog-module { border:1px solid #e1e7d8; border-radius:12px; padding:16px; max-height:300px; overflow:auto; }
.cc-catalog-module h4 { display:flex; gap:9px; align-items:center; font-size:13px; padding-bottom:13px; margin-bottom:6px; border-bottom:1px solid #edf0e7; }
.cc-catalog-module h4 small { font-size:9px; font-weight:400; color:#a6b199; }
.cc-catalog-module h4 .cc-skill-icon { width:29px; height:29px; font-size:16px; }
.cc-unit-choice { display:flex; align-items:flex-start; gap:8px; padding:10px 0; font-size:11px; cursor:pointer; color:#778b68; }
.cc-unit-choice input { margin-top:3px; flex:0 0 auto; accent-color:#738f57; }
.cc-compose-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:22px; margin-top:24px; border-top:1px solid #e9edde; }
@media(min-width:1400px){.cc-auth-story{padding-left:80px;padding-right:80px}.cc-auth-story-copy{margin-top:120px}}
@media(max-width:1050px){.cc-auth-wrap{grid-template-columns:.9fr 1fr}.cc-auth-story{padding:35px}.cc-auth-panel{padding:35px}.cc-auth-story-copy h1{font-size:35px}.cc-stat-grid{gap:10px}.cc-stat{padding:16px}.cc-stat>small{font-size:8px}.cc-student-layout{grid-template-columns:230px minmax(0,1fr)}.cc-overview-grid{gap:16px}}
@media(max-width:800px){.cc-auth-wrap{display:block}.cc-auth-story{min-height:0;padding:25px 28px 29px}.cc-auth-story-copy{margin-top:35px}.cc-auth-story-copy h1{font-size:29px;margin:8px 0}.cc-auth-story-copy>p{font-size:12px}.cc-auth-bottom{display:none}.cc-auth-art{right:45px;bottom:35px;transform:scale(.6) rotate(-10deg);transform-origin:bottom right}.cc-auth-art>span{display:none}.cc-story-features{margin-top:17px;max-width:230px;gap:9px}.cc-auth-story-copy .cc-eyebrow{font-size:8px}.cc-auth-story-copy{max-width:75%}.cc-auth-panel{padding:25px 25px 20px}.cc-auth-card{max-width:440px}.cc-auth-footer{margin-top:25px}.cc-auth-card h2{font-size:23px}.cc-stat-grid{grid-template-columns:1fr 1fr}.cc-overview-grid{grid-template-columns:1fr}.cc-student-layout{grid-template-columns:1fr}.cc-roster{max-height:280px;overflow:auto}.cc-roster .panel-head{position:sticky;top:0;background:white;z-index:1;padding-bottom:8px}.cc-student-row{padding:9px}.cc-compose-fields{grid-template-columns:1fr;gap:0}.cc-tabs{gap:23px}.cc-assignment-heading{flex-direction:column;gap:7px}.cc-assignment-item{gap:9px}.cc-item-status{display:none}.cc-assignment-catalog{grid-template-columns:1fr}.cc-catalog-module{max-height:260px}.cc-compose-footer{align-items:flex-start;flex-direction:column}.cc-compose-footer>.btn{width:100%}.cc-auth-story-copy .cc-story-features{font-size:9px}.cc-wordmark{font-size:19px}.cc-wordmark svg{width:35px;height:35px;padding:8px}}
@media(prefers-reduced-motion:reduce){.cc-progress i{transition:none}}
.cc-reset-wrap { min-height:100vh; display:grid; place-items:center; padding:30px; background:#f0f4e9; }
.cc-reset-wrap .cc-auth-card { padding:30px; background:#fff; }
.cc-reset-wrap .cc-auth-card>.muted { margin-bottom:24px; }
.cc-reset-wrap .cc-auth-card>.cc-help { margin-top:20px; }
.cc-feedback-form { border-top:1px solid #e2e8d9; padding-top:18px; margin-top:20px; }
.cc-feedback-form>h4 { margin-bottom:15px; font-size:13px; }
.cc-feedback-task>strong { display:block; font-size:11px; margin-bottom:10px; font-weight:500; }
.cc-ratings { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.cc-ratings label { display:flex; flex-direction:column; gap:6px; font-size:9px; color:#9aa78c; }
.cc-ratings select { padding:7px 9px; border:1px solid #dfe7d5; border-radius:7px; background:#fff; color:#7d9468; font-size:11px; }
.cc-feedback-form>.cc-help { margin-top:9px; }
@media(max-width:450px){.cc-ratings{grid-template-columns:1fr}}
.cc-detail-progress>span>small { display:block; font-size:9px; color:#a4af99; margin-top:3px; }
/* Individual teaching workspaces. */
.cc-field select { width:100%; padding:12px 13px; border:1px solid #dfe5da; border-radius:8px; background:white; color:#334c3d; font:inherit; }
.cc-field select:focus { border-color:#95ad7c; box-shadow:0 0 0 3px #c9d5b330; }
.cc-preview-options { margin-top:12px; }
.cc-preview-options>.cc-preview { margin-top:10px; }
.cc-preview-student { border-top:1px solid #e4e9dc; padding-top:14px; margin-top:15px; }
.cc-preview-student .cc-field { margin-bottom:10px; }
.cc-sync-status { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:0 0 auto; }
.cc-sync-status>span { font-size:10px; color:#71895f; display:flex; align-items:center; gap:6px; }
.cc-sync-status>span>i { display:block; width:6px; height:6px; border-radius:50%; background:#91ad73; }
.cc-sync-status>small { font-size:9px; color:#a0ac96; }
.cc-sync-status>.btn { margin-top:5px; }
.cc-sync-status.has-error>span { color:#ae715e; }.cc-sync-status.has-error>span>i { background:#be806b; }
.cc-sync-explainer p { color:#819175; font-size:11px; line-height:1.9; margin-bottom:10px; }
.cc-sync-explainer .btn { margin:4px 0 12px; }
.cc-student-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.cc-student-card { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; text-align:left; cursor:pointer; color:inherit; }
.cc-student-card>strong { font-size:14px; font-weight:500; }
.cc-student-card:hover { border-color:#bacba8; box-shadow:0 4px 15px #5a743210; }
.cc-student-card-stats { grid-column:1/-1; display:flex; gap:0; margin:10px 0 5px; }
.cc-student-card-stats>span { flex:1; text-align:center; font-size:10px; color:#9ba88f; border-right:1px solid #e6ecdf; }
.cc-student-card-stats>span:last-child { border:0; }.cc-student-card-stats b { display:block; font-size:22px; color:#66834f; margin-bottom:3px; font-weight:500; }
.cc-student-card-link { grid-column:1/-1; color:#87a16f; font-size:10px; display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.cc-student-card-link svg { width:14px; height:14px; }
.cc-recent-head { margin-top:30px; }
.cc-assignment-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.cc-assignment-filters button { border:1px solid #e0e8d6; background:#fafbf7; border-radius:8px; padding:8px 12px; font-size:10px; color:#8c9d7d; cursor:pointer; }
.cc-assignment-filters button.active { color:#50723e; border-color:#bdcfaa; background:#edf4e5; }
.cc-assignment-filters button>span { margin-left:7px; opacity:.7; }
.cc-detail-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-top:15px; border-bottom:1px solid #e5ecdd; padding-bottom:12px; }
.cc-detail-tabs button { border:0; border-radius:7px; background:#f5f8f0; color:#98a58c; padding:8px 10px; font-size:10px; cursor:pointer; }
.cc-detail-tabs button.active { background:#e9f1df; color:#607f4d; }
.cc-module-progress { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.cc-module-progress article { border:1px solid #e4ebdc; border-radius:10px; padding:15px; display:grid; grid-template-columns:auto 1fr; gap:7px 10px; align-items:center; }
.cc-module-progress strong { font-size:12px; font-weight:500; }.cc-module-progress strong small { display:block; margin-top:3px; font-size:8px; color:#a4b298; font-weight:400; }
.cc-module-progress p { grid-column:1/-1; font-size:10px; color:#8b9d7b; margin-top:7px; }.cc-module-progress p b { color:#64814c; font-weight:500; }
.cc-module-progress article>small { grid-column:1/-1; font-size:9px; color:#a6b29b; }
.cc-personal-assignment { margin-top:16px; }.cc-personal-assignment h4 { font-size:11px; font-weight:500; margin-bottom:5px; }.cc-personal-assignment h4 small { float:right; color:#9daf8a; font-weight:400; font-size:9px; }
.cc-wrong-question { padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid #e7eddf; }.cc-wrong-question:last-child { border-bottom:0; margin-bottom:0; padding-bottom:0; }
.cc-wrong-question h4 { font-size:11px; font-weight:500; margin-bottom:9px; color:#65804f; }.cc-wrong-question>p { font-size:12px; color:#637d54; line-height:1.8; }
.cc-wrong-question dl { margin:12px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }.cc-wrong-question dl>div { padding:10px 12px; background:#f6f8f2; border-radius:7px; }.cc-wrong-question dt { font-size:9px; color:#9cac8c; margin-bottom:7px; }.cc-wrong-question dd { font-size:12px; margin:0; line-height:1.7; overflow-wrap:anywhere; }
.cc-question-explanation { background:#f0f5e8; border-radius:8px; padding:12px; }.cc-question-explanation strong { font-size:10px; font-weight:500; color:#8b9e75; }.cc-question-explanation p { font-size:11px; line-height:1.9; color:#7b9263; margin-top:5px; white-space:pre-wrap; }
.cc-notifications { padding:10px 20px; }.cc-notification { display:flex; gap:12px; padding:20px 5px; border-bottom:1px solid #e8eddf; align-items:flex-start; }.cc-notification:last-child { border:0; }
.cc-notification-dot { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#d7e0cd; margin-top:5px; }.cc-notification.unread .cc-notification-dot { background:#86a866; }
.cc-notification>div:nth-child(2) { flex:1; }.cc-notification h3 { font-size:12px; font-weight:500; }.cc-notification p { font-size:11px; color:#8f9f7e; margin:7px 0; line-height:1.8; }.cc-notification small { font-size:9px; color:#a5b098; }
.cc-notification-actions { display:flex; align-items:center; gap:8px; flex-direction:column; }
.cc-recipient-field { padding:16px; background:#f6f9f1; border:1px solid #e3ebd8; border-radius:10px; margin-bottom:23px; }
@media(max-width:800px){.cc-sync-status{align-items:flex-start}.cc-student-cards{grid-template-columns:1fr}.cc-module-progress{gap:9px}.cc-module-progress article{padding:12px}.cc-notification{flex-wrap:wrap}.cc-notification-actions{margin-left:19px;flex-direction:row}.cc-notifications{padding:5px 15px}.cc-detail-tabs{gap:5px}.cc-detail-tabs button{padding:8px;font-size:9px}.cc-assignment-item .cc-item-status{display:flex;font-size:9px}.cc-assignment-item .btn{font-size:10px;padding:7px 9px}.cc-assignment-item{flex-wrap:wrap}.cc-assignment-item>div{min-width:45%}}
@media(max-width:450px){.cc-module-progress{grid-template-columns:1fr}.cc-wrong-question dl{grid-template-columns:1fr}.cc-student-detail{padding:18px}}
.cc-draft-progress .cc-detail-progress { border:0; padding-bottom:7px; }.cc-draft-progress .cc-progress { height:4px; margin-bottom:15px; }
/* Keep the location of a practice and its original material beside the work. */
.cc-source-label { display:block; font-size:10px; line-height:1.7; color:#617d57; font-weight:500; margin-top:5px; letter-spacing:0; }
.cc-attempt>summary .cc-source-label { font-size:10px; }
.cc-unit-choice .cc-source-label { font-size:9px; color:#879a76; margin-top:3px; }
.cc-assignment-item { flex-wrap:wrap; }
.cc-original-details { border:1px solid #dfe7d6; border-radius:8px; margin:10px 0; background:#fff; min-width:0; }
.cc-original-details>summary { cursor:pointer; padding:10px 12px; color:#58764a; font-size:11px; line-height:1.6; }
.cc-original-details[open]>summary { border-bottom:1px solid #e5ecdd; background:#f5f8ef; }
.cc-original-body { padding:14px; }
.cc-assignment-item>.cc-original-details,.cc-recording>.cc-original-details { flex:0 0 100%; width:100%; margin:0; }
.cc-personal-assignment>.cc-original-details { margin-top:5px; margin-bottom:15px; }
.question-reference { color:#36533b; line-height:1.85; font-size:12px; overflow-wrap:anywhere; }
.question-reference + .question-reference { margin-top:24px; padding-top:20px; border-top:1px solid #e5ecdd; }
.question-reference h3,.question-reference h4 { font-size:13px; line-height:1.7; margin:8px 0 10px; font-weight:600; color:#36533b; }
.question-reference p { margin:8px 0; white-space:pre-wrap; }
.question-reference .reference-source { display:block; color:#7c9270; font-size:10px; margin:0 0 10px; }
.question-reference .reference-source>span,.question-reference .reference-source>strong { display:block; }
.question-reference .reference-context { color:#6d855e; font-size:10px; margin-bottom:10px; }
.question-reference .reference-instructions { padding:10px 12px; background:#f3f7ec; border-radius:7px; font-size:11px; margin:10px 0; }
.question-reference .reference-question { margin:12px 0; }
.question-reference .reference-options { list-style:none; margin:10px 0; padding:0; }
.question-reference .reference-options li { border:1px solid #e2e9d9; border-radius:6px; padding:7px 10px; margin:5px 0; background:#fff; }
.question-reference .reference-options li strong { color:#5b794a; margin-right:7px; }
.question-reference .reference-options[type="A"] { list-style:upper-alpha; padding-left:27px; }
.question-reference.reference-speaking .reference-options { list-style:decimal; padding-left:27px; }
.question-reference details { border:1px solid #e0e8d6; border-radius:7px; padding:0; margin:12px 0; background:#fff; }
.question-reference details>summary { cursor:pointer; color:#62814e; padding:10px 12px; font-size:11px; }
.question-reference details[open]>summary { border-bottom:1px solid #e4ebdc; }
.question-reference .reference-passage,.question-reference .reference-script { padding:5px 13px 10px; max-height:440px; overflow:auto; white-space:pre-wrap; font-size:12px; color:#36533b; }
.question-reference .reference-answer { background:#f3f7ec; padding:12px; border-radius:7px; margin-top:12px; }
.question-reference .reference-answer dl { margin:0; }
.question-reference .reference-answer p { font-size:11px; }
.question-reference .reference-table-wrap { overflow:auto; margin:14px 0; }
.question-reference table { border-collapse:collapse; width:100%; min-width:300px; font-size:11px; }
.question-reference th,.question-reference td { border:1px solid #dce5d1; padding:9px 11px; text-align:left; }
.question-reference th { background:#edf3e5; font-weight:500; }
.question-reference .reference-cue-card { background:#f5f8ef; padding:14px; margin:10px 0; border:1px solid #dde7d1; border-radius:8px; }
.question-reference .reference-cue-card ul { padding-left:22px; margin:10px 0; }
.question-reference audio { display:block; width:100%; margin:12px 0; }
.question-reference .reference-empty,.cc-original-body>.reference-empty { padding:12px; font-size:11px; color:#8b8866; background:#f7f5ed; border-radius:7px; }
.cc-wrong-question .question-reference h4 { font-size:12px; color:#36533b; }
@media(max-width:650px){.cc-original-body{padding:11px}.question-reference{font-size:12px}.cc-source-label{font-size:9px}.question-reference .reference-passage,.question-reference .reference-script{max-height:340px}}
/* A student file gets the full content width; course navigation lives in the sidebar. */
.cc-preview-inline { margin:-12px 0 20px; font-size:10px; color:#8b977e; }
.cc-profile-workspace-head { justify-content:flex-end; margin:0 0 10px; }
.cc-profile-workspace-head>div:first-child { display:none; }
.cc-profile-workspace-head .cc-sync-status { flex-direction:row; align-items:center; gap:12px; }
.cc-profile-workspace-head .cc-sync-status>.btn { margin:0; }
.cc-profile-workspace-head+.cc-preview-inline { margin:0 0 12px; text-align:right; }
.cc-student-full { padding:24px 28px; min-width:0; }
.cc-directory-head,.cc-file-toolbar,.cc-review-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cc-directory-head { margin-bottom:22px; }
.cc-directory-head h2 { display:flex; align-items:center; gap:12px; font-size:18px; }
.cc-directory-head .cc-help { margin-top:8px; }
.cc-directory-search { display:flex; flex-direction:column; gap:6px; min-width:230px; color:#788b6b; font-size:11px; }
.cc-directory-search input,.cc-student-switch select,.cc-attempt-picker select { background:#fff; border:1px solid #dce5d4; border-radius:8px; padding:10px 12px; color:#3c5b42; font:inherit; min-width:0; }
.cc-table-scroll { overflow-x:auto; }
.cc-student-table { width:100%; min-width:760px; border-collapse:collapse; text-align:left; font-size:12px; }
.cc-student-table thead th { background:#f6f8f1; color:#7d8e70; font-size:10px; font-weight:500; padding:13px 12px; white-space:nowrap; border-bottom:1px solid #e5ebdc; }
.cc-student-table tbody td,.cc-student-table tbody th { border-bottom:1px solid #edf1e7; padding:16px 12px; font-weight:400; }
.cc-student-table td:nth-child(3),.cc-student-table td:nth-child(4) { font-size:17px; color:#527344; }
.cc-student-table td:last-child { text-align:right; }
.cc-directory-person { display:flex; gap:10px; align-items:center; padding:0; border:0; background:none; text-align:left; color:inherit; cursor:pointer; }
.cc-directory-person strong { font-size:12px; font-weight:600; }.cc-directory-person small { display:block; margin-top:4px; color:#93a184; font-size:10px; }
.cc-student-table tr[hidden] { display:none; }.cc-directory-footnote { margin-top:15px; }.cc-muted { color:#9aa78e; }
.cc-file-toolbar { padding-bottom:18px; margin-bottom:24px; border-bottom:1px solid #e6ecde; flex-wrap:wrap; }
.cc-student-switch { display:flex; align-items:center; gap:9px; font-size:10px; color:#87967a; margin-right:auto; }
.cc-student-switch select { min-width:180px; font-size:12px; padding:8px 10px; }
.cc-file-toolbar-actions { display:flex; gap:9px; }.cc-student-file-heading h2 { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.cc-student-file-heading h2>span { font-size:12px; padding-left:12px; border-left:1px solid #dce5d3; color:#7f946d; font-weight:400; }
.cc-student-file-heading>.cc-text-button { margin-left:auto; white-space:nowrap; }
.cc-student-skills { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-top:25px; }
.cc-skill-file { display:grid; grid-template-columns:auto 1fr; gap:10px; text-align:left; border:1px solid #e1e9d7; border-radius:11px; padding:18px 16px; background:#fafcf6; color:#4d6940; cursor:pointer; }
.cc-skill-file:hover { border-color:#9fb988; background:#f5f9ef; }.cc-skill-file>strong { font-size:14px; font-weight:500; }.cc-skill-file>strong>small { display:block; font-size:9px; color:#9baa8e; font-weight:400; margin-top:5px; }
.cc-skill-file>span:not(.cc-skill-icon),.cc-skill-file>small,.cc-skill-file>b { grid-column:1/-1; font-size:11px; font-weight:400; line-height:1.6; }.cc-skill-file>small { font-size:10px; color:#91a180; }.cc-skill-file>b { margin-top:8px; color:#729457; }
.cc-file-overview .cc-module-progress { display:none; }
.cc-skill-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:23px 0; background:#f5f8ef; border:1px solid #e5ecdc; border-radius:10px; }
.cc-skill-summary>span { padding:18px 14px; text-align:center; color:#93a283; font-size:10px; border-right:1px solid #e1e9d7; }.cc-skill-summary>span:last-child { border:0; }
.cc-skill-summary b { display:block; font-size:22px; color:#64834e; margin-bottom:5px; font-weight:500; }.cc-skill-summary b>small { font-size:13px; color:#97a887; }.cc-skill-summary>span:last-child b { font-size:18px; min-height:26px; }
.cc-review-mode { display:flex; gap:8px; border-bottom:1px solid #e2e9d8; padding-bottom:12px; }.cc-review-mode button { border:0; padding:9px 14px; background:#f3f6ed; border-radius:7px; color:#92a17f; font-size:11px; cursor:pointer; }.cc-review-mode button.active { background:#e9f1df; color:#567743; }
.cc-review-head { margin-bottom:18px; align-items:flex-start; }.cc-review-head h3 { font-size:16px; margin-bottom:7px; }.cc-attempt-picker { display:flex; flex-direction:column; gap:8px; font-size:10px; color:#839573; margin:18px 0; }.cc-attempt-picker select { width:100%; font-size:12px; }
.cc-review-scoreline { display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; padding:14px 16px; border:1px solid #e0e8d5; border-radius:9px; background:#f8faf4; }.cc-review-scoreline>strong { font-size:13px; font-weight:500; }.cc-review-scoreline>.cc-source-label { margin:0; }.cc-review-scoreline>span:last-child { margin-left:auto; color:#8a9c78; font-size:11px; }.cc-review-scoreline b { color:#557843; }
.cc-wrong-numbers { margin:20px 0; }.cc-wrong-numbers>strong { display:block; font-size:11px; color:#8b9a7b; margin-bottom:10px; font-weight:500; }.cc-wrong-numbers>div { display:flex; flex-wrap:wrap; gap:8px; }.cc-wrong-numbers button { border:1px solid #e2cdb9; color:#a67a54; background:#fbf6ef; border-radius:7px; min-width:40px; padding:8px 10px; font-size:12px; cursor:pointer; }.cc-wrong-numbers button.active { color:#fff; background:#ad895e; border-color:#ad895e; }
.cc-selected-wrong { border:1px solid #e3e9d9; border-radius:11px; padding:21px; background:white; }.cc-selected-wrong-heading { display:flex; align-items:center; gap:12px; }.cc-selected-wrong-heading h4 { font-size:17px; font-weight:500; color:#9a754e; }.cc-selected-wrong-heading>span { font-size:10px; color:#91a07e; }.cc-wrong-prompt { font-size:15px; line-height:1.85; margin:18px 0; color:#405b44; white-space:pre-wrap; }
.cc-answer-comparison { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }.cc-answer-comparison>div { border:1px solid #eadaca; background:#fcf8f2; padding:15px; border-radius:8px; }.cc-answer-comparison>div:last-child { background:#f2f7ea; border-color:#dfe9d1; }.cc-answer-comparison dt { font-size:11px; color:#9d8063; margin-bottom:8px; }.cc-answer-comparison>div:last-child dt { color:#7a9461; }.cc-answer-comparison dd { font-size:16px; line-height:1.8; margin:0; color:#725338; overflow-wrap:anywhere; }.cc-answer-comparison>div:last-child dd { color:#55753f; }
.cc-selected-wrong>.cc-original-details { margin-top:20px; }.cc-wrong-paging { display:flex; justify-content:space-between; align-items:center; margin-top:18px; font-size:11px; color:#92a17e; }.cc-no-mistakes { margin:24px 0; background:#f5f9ef; border-radius:10px; }.cc-script-text { white-space:pre-wrap; font-size:12px; line-height:1.9; margin:12px; }
.cc-skill-progress { border-top:1px solid #e5ecdb; padding-top:20px; margin-top:28px; }.cc-skill-progress>summary { cursor:pointer; color:#688651; font-size:12px; }.cc-skill-progress>summary>span { color:#98a789; font-size:10px; margin-left:12px; }
@media(max-width:1100px){.cc-student-skills{grid-template-columns:1fr 1fr}.cc-student-full{padding:20px}.cc-directory-search{min-width:180px}}
@media(max-width:700px){.cc-directory-head{align-items:stretch;flex-direction:column}.cc-student-full{padding:17px}.cc-file-toolbar{gap:13px}.cc-student-switch{order:2;width:100%;margin:0}.cc-student-switch select{flex:1}.cc-file-toolbar-actions{margin-left:auto}.cc-student-file-heading{flex-wrap:wrap}.cc-student-file-heading>.cc-text-button{width:100%;text-align:right}.cc-skill-summary{grid-template-columns:1fr 1fr}.cc-skill-summary>span:nth-child(2){border-right:0}.cc-skill-summary>span:nth-child(-n+2){border-bottom:1px solid #e1e9d7}.cc-review-head{gap:10px;flex-wrap:wrap}.cc-review-head .btn{margin-left:auto}.cc-answer-comparison{grid-template-columns:1fr}.cc-selected-wrong{padding:15px}.cc-review-scoreline>span:last-child{margin-left:0;width:100%}.cc-skill-progress>summary>span{display:block;margin:7px 0 0 16px}.cc-profile-workspace-head .cc-sync-status{gap:8px}.cc-profile-workspace-head+.cc-preview-inline{font-size:9px}.cc-student-skills{gap:9px}.cc-skill-file{padding:14px 12px}}
/* During a lesson, keep the chosen student's answers above the fold. */
.cc-focused-file { padding:17px 20px; }
.cc-focused-file .cc-file-toolbar { padding-bottom:11px; margin-bottom:11px; gap:10px; }
.cc-focused-file .cc-student-switch select { padding:7px 9px; }
.cc-focused-file .cc-skill-summary { margin:10px 0 12px; border:0; background:#f5f8ef; }
.cc-focused-file .cc-skill-summary>span { padding:9px 10px; display:flex; align-items:baseline; justify-content:center; gap:7px; font-size:9px; }
.cc-focused-file .cc-skill-summary b,.cc-focused-file .cc-skill-summary>span:last-child b { display:inline; font-size:19px; min-height:0; margin:0; }
.cc-focused-file .cc-skill-summary b>small { font-size:11px; }
.cc-focused-file .cc-review-mode { padding-bottom:8px; gap:6px; }
.cc-focused-file .cc-review-mode button { padding:6px 12px; font-size:10px; }
.cc-focused-file .cc-detail-section { margin-top:12px; }
.cc-focused-file .cc-review-head { align-items:center; margin:0 0 10px; }
.cc-focused-file .cc-review-head h3 { font-size:13px; margin:0; }.cc-focused-file .cc-review-head .cc-help { display:none; }
.cc-focused-file .cc-attempt-picker { flex-direction:row; align-items:center; margin:8px 0; gap:10px; }.cc-focused-file .cc-attempt-picker>span { flex:0 0 auto; }.cc-focused-file .cc-attempt-picker select { padding:7px 9px; font-size:11px; }
.cc-focused-file .cc-review-scoreline { border:0; border-radius:0; padding:6px 0; background:none; gap:5px 12px; }.cc-focused-file .cc-review-scoreline>strong { display:none; }.cc-focused-file .cc-review-scoreline .cc-source-label { font-size:9px; }
.cc-focused-file .cc-wrong-numbers { display:flex; align-items:center; gap:12px; margin:10px 0 12px; }.cc-focused-file .cc-wrong-numbers>strong { flex:0 0 auto; font-size:10px; margin:0; }.cc-focused-file .cc-wrong-numbers>div { gap:5px; }.cc-focused-file .cc-wrong-numbers button { min-width:34px; padding:6px 7px; font-size:11px; }
.cc-focused-file .cc-selected-wrong { padding:15px 17px; }.cc-focused-file .cc-selected-wrong-heading h4 { font-size:15px; }.cc-focused-file .cc-selected-wrong>.cc-source-label { margin-top:4px; font-size:9px; }.cc-focused-file .cc-wrong-prompt { margin:9px 0; font-size:14px; line-height:1.7; }
.cc-focused-file .cc-answer-comparison { gap:10px; margin:10px 0; }.cc-focused-file .cc-answer-comparison>div { padding:10px 12px; }.cc-focused-file .cc-answer-comparison dt { font-size:10px; margin-bottom:4px; }.cc-focused-file .cc-answer-comparison dd { font-size:14px; line-height:1.6; }
.cc-focused-file .cc-question-explanation { padding:9px 12px; }.cc-focused-file .cc-question-explanation p { margin-top:3px; line-height:1.7; }.cc-focused-file .cc-selected-wrong>.cc-original-details { margin-top:12px; }.cc-focused-file .cc-wrong-paging { margin-top:10px; }
@media(max-width:700px){.cc-focused-file{padding:14px}.cc-focused-file .cc-student-switch{width:100%;order:2}.cc-focused-file .cc-skill-summary>span{padding:10px 7px}.cc-focused-file .cc-wrong-numbers{align-items:flex-start;flex-direction:column;gap:8px}.cc-focused-file .cc-attempt-picker{flex-direction:column;align-items:stretch}.cc-focused-file .cc-answer-comparison{grid-template-columns:1fr}.cc-focused-file .cc-review-scoreline>span:last-child{width:auto}.cc-focused-file .cc-selected-wrong{padding:13px}}