.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}
.course-classroom-main{width:min(1600px,calc(100% - 40px));padding-top:24px;container:course-classroom / inline-size}
.appbar{height:auto;min-height:64px;container:classroom-nav / inline-size}
.course-classroom-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.course-classroom-head h1{font-size:26px;line-height:1.4;margin:0;color:#224e58}
.course-classroom-head .eyebrow{font-size:12px;color:#63808a;margin-bottom:7px}
.course-lesson-actions{display:flex;align-items:end;gap:12px;flex-shrink:0}
.course-lesson-select{display:grid;gap:6px;color:#67808a;font-size:12px}
.course-lesson-select select{max-width:300px;min-height:40px;padding:8px 12px;border:1px solid #ccdde2;border-radius:6px;background:#fff;color:#294e5b;font-size:13px}
.course-classroom{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
.course-files-panel{min-width:0;border:1px solid #d6e4e8;border-radius:8px;background:#fff;overflow:hidden}
.course-files-panel>header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e7eef1;background:#edf5f5}
.course-files-panel>header h2{margin:0;font-size:17px;color:#265964}
.course-files-panel>header .eyebrow{font-size:10px;letter-spacing:.06em;color:#6e8a92;margin-bottom:5px}
.course-files-panel>header>span{color:#6b838c;font-size:12px;white-space:nowrap}
.course-file-search{display:block;padding:16px 16px 0}
.course-file-search input{display:block;width:100%;min-height:38px;padding:8px 10px;border:1px solid #d4e2e7;border-radius:5px;background:#f9fbfc;color:#325461;font-size:13px}
.course-files-hint{font-size:11px;line-height:1.7;margin:10px 16px;color:#708690}
[data-course-files]{overflow:auto;max-height:730px;padding:4px 8px 16px;scrollbar-width:thin}
.course-file-tree{margin:0;padding:0;list-style:none;min-width:0}
.course-file-tree .course-file-tree{padding-left:12px;border-left:1px solid #ecf1f3;margin-left:13px}
.course-file-tree summary{display:flex;align-items:center;gap:7px;min-height:32px;padding:5px 7px;cursor:pointer;color:#58727e;font-size:12px;font-weight:650;list-style:none}
.course-file-tree summary::-webkit-details-marker{display:none}
.course-file-tree summary:before{content:'›';color:#7d959e;font-size:15px;transform-origin:center;transition:transform .15s}
.course-file-tree details[open]>summary:before{transform:rotate(90deg)}
.course-file-tree svg{width:15px;height:15px;flex-shrink:0;stroke-width:1.6}
.course-file-row{display:flex;align-items:center;gap:2px;min-width:0;border-radius:4px}
.course-file-row:hover{background:#f0f6f7}
.course-file-button{display:flex;align-items:center;gap:7px;flex:1;min-width:0;min-height:33px;padding:7px;border:0;border-radius:4px;background:transparent;color:#456673;text-align:left;font:12px/1.45 Menlo,Consolas,"PingFang SC",monospace}
.course-file-button>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course-file-button.active{background:#e3f2f0;color:#136775;font-weight:750}
.course-file-button:focus-visible,.course-file-tree summary:focus-visible,.course-file-download:focus-visible{outline:2px solid #398d98;outline-offset:1px}
.course-file-download{display:grid;place-items:center;flex:none;width:27px;height:30px;color:#74909b;border-radius:4px}
.course-file-download:hover{background:#e4eeef;color:#1a6e77}
.course-files-empty{padding:12px;color:#7a9099;font-size:12px}
.course-asset-preview{display:flex;flex-direction:column;align-items:start;gap:8px;padding:16px;border-top:1px solid #e4ecef;background:#f6f9fa;font-size:12px;overflow-wrap:anywhere}
.course-asset-preview[hidden]{display:none}
.course-asset-preview img{display:block;width:100%;max-height:200px;object-fit:contain;background:#edf2f4;border-radius:4px}
.course-asset-preview strong{font-weight:650;color:#385a67}
.course-asset-preview>span{color:#7d919a}
.course-asset-preview>a{color:#1b7281}
.course-coding-space{min-width:0}
.course-coding-column{min-width:0}
.course-document-viewer{min-width:0;margin-bottom:24px;border:1px solid #d6e4e8;border-radius:8px;background:#fff;overflow:hidden}
.course-document-viewer[hidden]{display:none}
.course-document-viewer>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:#edf5f5;border-bottom:1px solid #e1ebee}
.course-document-viewer .eyebrow{margin:0 0 5px;font-size:11px;color:#63828a}
.course-document-viewer h2{margin:0;color:#245764;font-size:18px;overflow-wrap:anywhere}
.course-document-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.course-document-actions .secondary{min-height:34px;padding:7px 10px;font-size:12px;white-space:nowrap;text-decoration:none}
.course-document-viewer>[data-course-document-status]{margin:12px 20px 0;font-size:12px;line-height:1.7;color:#6b838d}
.course-document-viewer>[data-course-document-status].error{color:#b54454}
.course-document-body{padding:12px 20px 18px}
.course-document-body pre{max-height:360px;margin:0;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4;font:14px/1.9 Menlo,Consolas,"PingFang SC","Microsoft YaHei",monospace;color:#355663}
.course-document-body pre:focus-visible{outline:2px solid #398d98;outline-offset:3px}
@media(max-width:760px){.course-document-viewer>header{align-items:flex-start;flex-wrap:wrap;padding:14px 16px}.course-document-viewer h2{font-size:16px}.course-document-viewer>[data-course-document-status]{margin-left:16px;margin-right:16px}.course-document-body{padding:12px 16px 16px}.course-document-body pre{max-height:320px;font-size:13px}.course-document-viewer{margin-bottom:20px}}
.lesson-card .primary{min-height:40px;white-space:nowrap;font-size:13px}
@media(max-width:1100px){.course-classroom{grid-template-columns:245px minmax(0,1fr);gap:18px}.course-classroom-head h1{font-size:23px}.course-lesson-select select{max-width:240px}}
@media(max-width:760px){.course-classroom-main{width:calc(100% - 24px);padding-top:20px}.course-classroom-head{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:18px}.course-lesson-actions{justify-content:space-between}.course-lesson-select{flex:1;min-width:0}.course-lesson-select select{width:100%;max-width:none;min-width:0}.course-lesson-actions>.secondary{font-size:12px;white-space:nowrap}.course-classroom{grid-template-columns:1fr;gap:20px}.course-files-panel>header{padding:14px 16px}.course-files-panel>header .eyebrow{display:none}.course-files-panel>header h2{font-size:15px}[data-course-files]{max-height:260px}.course-files-hint{margin-bottom:5px}.course-file-search{padding-top:12px}.lesson-card .primary{grid-column:2;justify-self:start}}
@media(prefers-reduced-motion:reduce){.course-file-tree summary:before{transition:none}}
/* Browser/app zoom can leave fewer CSS pixels than the outer viewport suggests.
   Base the two-column classroom layout on its actual usable width as well. */
@container course-classroom (max-width:760px){
  .course-classroom-head{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:18px}
  .course-classroom-head h1{overflow-wrap:anywhere}
  .course-lesson-actions{justify-content:space-between}
  .course-lesson-select{flex:1;min-width:0}
  .course-lesson-select select{width:100%;max-width:none;min-width:0}
  .course-lesson-actions>.secondary{font-size:12px;white-space:nowrap}
  .course-classroom{grid-template-columns:1fr;gap:20px}
  .course-files-panel>header{padding:14px 16px}
  .course-files-panel>header .eyebrow{display:none}
  .course-files-panel>header h2{font-size:15px}
  [data-course-files]{max-height:260px}
  .course-files-hint{margin-bottom:5px}
  .course-file-search{padding-top:12px}
}
@container classroom-nav (max-width:760px){
  .topbar{gap:10px}
  .profile span:last-of-type{display:none}
}
@container classroom-nav (max-width:480px){
  .topbar{flex-wrap:wrap;padding:10px 0}
  .topbar>.nav{order:3;flex-basis:100%;min-width:0}
  .topbar>.profile{margin-left:auto;max-width:100%;flex-wrap:wrap;gap:6px}
  .topbar>.brand{font-size:16px}
  .nav button{font-size:14px;padding:10px}
  .topbar .avatar{width:27px;height:27px}
  .password-entry{font-size:11px;padding:7px}
}