.materials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.materials-resource{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;padding:24px;color:var(--text);cursor:pointer;transition:border-color .15s,transform .15s}
.materials-resource:hover{border-color:var(--ui-primary);transform:translateY(-2px)}
.materials-resource strong{font-size:17px}.materials-resource p{margin:0;color:var(--muted);line-height:1.7;font-size:14px}.materials-number{color:var(--ui-primary);font-size:12px;letter-spacing:.08em;font-weight:700}
.materials-open{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;color:var(--ui-primary);font-size:13px}.materials-open svg{width:15px;height:15px}
.materials-detail{margin-top:18px;padding:28px;max-width:900px}.materials-detail h2{margin:10px 0 28px}.materials-detail section+section{margin-top:26px}.materials-detail h3{font-size:15px;margin-bottom:10px}.materials-detail p{line-height:1.9;white-space:pre-line;color:var(--text)}
.materials-publish-help{color:var(--muted);line-height:1.7;margin-bottom:20px}.materials-publish-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:16px 0 10px}.materials-publish-label span{font-size:12px;color:var(--muted)}
.materials-publish-items{max-height:42vh;overflow:auto;border:1px solid var(--ui-line);border-radius:12px}.materials-pick{display:flex;align-items:flex-start;gap:12px;padding:14px;cursor:pointer;color:var(--text)}.materials-pick+.materials-pick{border-top:1px solid var(--ui-line)}.materials-pick input{margin-top:4px;accent-color:var(--ui-primary);width:17px;height:17px;flex-shrink:0}.materials-pick>span{flex:1;min-width:0}.materials-pick strong{display:block;font-size:14px}.materials-pick small{display:block;margin-top:5px;line-height:1.6;color:var(--muted);font-size:12px}.materials-pick em{font-style:normal;font-size:11px;white-space:nowrap;color:var(--muted);padding:3px 6px}.materials-pick .is-published{color:var(--ui-primary);background:var(--ui-soft);border-radius:5px}.materials-publish-items>p{padding:16px}.materials-publish-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.materials-teacher .page-heading .actions{flex-shrink:0}@media(max-width:600px){.materials-detail{padding:20px}.materials-publish-label{align-items:flex-start;flex-direction:column;gap:4px}.materials-publish-items{max-height:36vh}}
.materials-notes{margin-top:36px;padding-top:28px;border-top:1px solid var(--ui-line)}
.materials-notes-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}.materials-notes-heading h2{margin:0;font-size:20px;color:var(--ui-text)}.materials-notes-heading p{margin:7px 0 0;font-size:13px;line-height:1.8;color:var(--ui-muted)}.materials-notes-heading>span{flex:none;padding-top:4px;font-size:12px;color:var(--ui-muted);white-space:nowrap}
.materials-notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.materials-note{position:relative;display:flex;flex-direction:column;min-width:0;width:100%;padding:0;overflow:hidden;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-surface);color:var(--ui-text);text-align:left;cursor:zoom-in;transition:border-color .15s,transform .15s}
.materials-note:hover{border-color:var(--ui-primary);transform:translateY(-2px)}.materials-note:focus-visible{outline:2px solid var(--ui-primary);outline-offset:3px}
.materials-note-image{display:block;width:100%;aspect-ratio:16/9;background:var(--ui-soft);border-bottom:1px solid var(--ui-line)}.materials-note-image img{display:block;width:100%;height:100%;object-fit:contain}
.materials-note-copy{display:flex;flex-direction:column;gap:6px;min-width:0;padding:17px 42px 18px 18px;overflow-wrap:anywhere}.materials-note-copy strong{font-size:15px;line-height:1.6;font-weight:600}.materials-note-copy>span{font-size:12px;line-height:1.7;color:var(--ui-muted)}.materials-note-copy small{font-size:11px;line-height:1.7;color:var(--ui-muted)}.materials-note-open{position:absolute;right:17px;bottom:18px;font-size:19px;color:var(--ui-primary)}
.materials-notes-empty{padding:24px}.materials-notes-empty .empty{min-height:150px}.materials-load-error{padding:20px;color:var(--ui-muted)}.materials-load-error p{margin:0;font-size:13px;line-height:1.8}.materials-load-error p+p{margin-top:5px}
.materials-note-viewer>p{margin:0 0 14px;color:var(--ui-muted);font-size:13px;line-height:1.7}.materials-note-viewer>img{display:block;width:100%;height:auto;max-height:70dvh;object-fit:contain;background:var(--ui-soft);border-radius:8px}
@media(max-width:600px){.materials-notes{margin-top:28px;padding-top:24px}.materials-notes-heading{gap:12px;margin-bottom:17px}.materials-notes-heading h2{font-size:18px}.materials-notes-heading p{font-size:12px}.materials-notes-grid{grid-template-columns:1fr;gap:15px}.materials-note-copy{padding:15px 40px 16px 16px}}
@media(prefers-reduced-motion:reduce){.materials-note{transition:none}.materials-note:hover{transform:none}}