/* 沿用画板令牌；单一抽屉内切换内容，不新增首页入口或遮罩。 */
html body .course-library-tabs{display:flex;gap:4px;padding:4px;border-radius:var(--radius-md);background:var(--surface-soft);flex-shrink:0}
html body .course-library-tabs button{flex:1;min-height:40px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);font:inherit;cursor:pointer}
html body .course-library-tabs button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #0001;font-weight:650}
html body .course-library-body[hidden],html body .course-library-search[hidden],html body .course-library-status[hidden]{display:none}
html body .course-library-sheet.has-finished-courses{width:540px;max-width:calc(100vw - 16px);box-sizing:border-box;z-index:var(--layer-stack-950)}
html body .cl-root{display:flex;flex:1;flex-direction:column;min-height:0;gap:12px;font-size:14px}
html body .cl-root[hidden],html body .cl-root [hidden]{display:none!important}
html body .cl-content{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding:2px 12px 16px 8px}
html body .cl-content>*,html body .cl-content p{margin-top:0;margin-bottom:0}
html body .cl-content h3{font-size:20px;line-height:1.35;letter-spacing:-.02em}
html body .cl-content h4{font-size:16px;line-height:1.4;margin:0;color:var(--ink)}
html body .cl-intro{display:grid;gap:8px;padding:8px 0}
html body .cl-mode{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
html body .cl-mode span{margin-left:auto;font-size:11px}
html body .cl-root input[type=checkbox],html body .cl-root input[type=radio]{width:18px;height:18px;flex-shrink:0;accent-color:var(--ink);margin:0}
html body .cl-filters{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px}
html body .cl-filters label{display:grid;min-width:0;gap:5px;font-size:12px;color:var(--muted)}
html body .cl-root select,html body .cl-root input[type=search]{box-sizing:border-box;width:100%;min-width:0;min-height:42px;border:1px solid var(--line);border-radius:var(--radius-md);padding:8px;background:var(--surface);color:var(--ink);font:inherit}
html body .cl-parent,html body .cl-pick{display:flex;align-items:center;gap:7px;min-height:40px;font-size:12px}
html body .cl-parent{color:var(--muted)}
html body .cl-results{display:grid;gap:12px}
html body .cl-course{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface)}
html body .cl-meta,html body .cl-muted{font-size:12px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
html body .cl-summary{font-size:13px;line-height:1.65;color:var(--ink)}
html body .cl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
html body .cl-button{min-height:42px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;line-height:1.5;cursor:pointer;text-align:center}
html body .cl-button:hover{background:var(--surface-hover)}
html body .cl-button.is-primary{background:var(--ink);color:var(--surface);border-color:var(--ink);font-weight:600}
html body .cl-button:disabled{opacity:.55;cursor:default}
html body .cl-root :is(button,input,select):focus-visible,html body .course-library-tabs button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
html body .cl-status{margin:0;color:var(--muted);font-size:12px;line-height:1.6;overflow-wrap:anywhere}
html body .cl-status:empty{display:none}
html body .cl-empty{display:grid;justify-items:start;gap:12px;padding:24px 8px}
html body .cl-tray{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid var(--line);font-size:12px}
html body .cl-actions{display:flex;flex-wrap:wrap;gap:8px}
html body .cl-actions>*{flex:1}
html body .cl-preview{display:grid;gap:12px;padding:18px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface-soft)}
html body .cl-preview strong{font-size:24px;letter-spacing:-.02em}
html body .cl-preview-scene{min-height:48px;font-size:15px;line-height:1.7}
html body .cl-preview video{width:100%;max-height:260px;aspect-ratio:16/9;background:var(--n-900);border-radius:var(--radius-sm)}
html body .cl-preview input[type=range]{width:100%;margin:0;accent-color:var(--ink)}
html body .cl-scopes{display:grid;gap:4px;margin:0;padding:12px;border:1px solid var(--line);border-radius:var(--radius-md)}
html body .cl-scopes legend{font-size:12px;color:var(--muted);padding:0 4px}
html body .cl-scopes label{display:flex;align-items:center;gap:8px;min-height:42px}
html body .cl-price{font-size:18px;font-weight:650}
html body .cl-confirm{display:grid;gap:18px;padding:10px 2px}
html body .cl-confirm-lead{font-size:19px;line-height:1.7;letter-spacing:-.01em}
@media(max-width:640px){
 html body .course-library-sheet.has-finished-courses{width:100%;height:90dvh;max-height:90dvh}
 html body .has-finished-courses .course-library-card{padding-bottom:max(16px,env(safe-area-inset-bottom))}
 html body .cl-filters{grid-template-columns:1fr 1fr}
 html body .cl-filters label:last-child{grid-column:1/-1}
 html body .cl-course{padding:12px}
 html body .cl-mode span{margin-left:0;width:100%}
 html body .cl-actions{flex-direction:column}
 html body .cl-confirm-lead{font-size:17px}
}