.student-project-grid{columns:4 220px;column-gap:18px;margin:24px 0}.student-project-tile{display:block;position:relative;break-inside:avoid;overflow:hidden;border-radius:16px;background:#202126;margin:0 0 18px;color:white;isolation:isolate}.student-project-tile>img{display:block;width:100%;height:auto;transition:transform .4s}.student-project-tile:hover>img{transform:scale(1.025)}.project-caption{position:absolute;inset:auto 10px 10px;padding:14px 16px;border-radius:12px;background:rgba(16,17,20,.9);backdrop-filter:blur(12px);opacity:0;transform:translateY(8px);transition:.2s;display:grid;gap:5px}.student-project-tile:hover .project-caption,.student-project-tile:focus-visible .project-caption{opacity:1;transform:none}.project-caption small{color:#c6c6cc}.project-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}.project-admin-row{display:flex;gap:18px;align-items:center;background:var(--panel,#202126);border:1px solid #34353c;border-radius:12px;padding:14px;margin:10px 0}.project-admin-row>img{width:80px;height:60px;object-fit:cover;border-radius:8px}.project-admin-row>div:first-of-type{flex:1;min-width:0;display:grid;gap:6px}.project-admin-row small{color:#aaa}.project-detail{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}.project-dialog.wide{width:min(1200px,96vw);max-width:1200px}.project-main-image{display:block;width:100%;height:auto;border-radius:12px}.project-information{position:sticky;top:0;padding:10px 0}.project-information h2{margin:14px 0}.project-eyebrow{font-size:10px;letter-spacing:.16em;color:#ffffff}.project-student{display:flex;gap:8px;align-items:center}.project-course{background:#ffffff08;border:1px solid #ffffff15;padding:16px;border-radius:12px;display:grid;gap:8px;margin:20px 0}.project-course small{color:#aaa}.project-description{white-space:pre-wrap;overflow-wrap:anywhere}.project-reactions{display:flex;flex-wrap:wrap;gap:8px}.project-reactions .is-active{color:#ffffff;border-color:#ffffff;background:#ffffff18}.project-reactions .is-active svg{fill:#ffffff44}.project-image-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin:16px 0}.project-thumbs{display:flex;gap:8px;overflow:auto;padding:5px}.project-thumbs button{flex-shrink:0;padding:3px;background:transparent;border:1px solid #45454a;border-radius:8px}.project-thumbs button[aria-pressed=true]{border-color:#ffffff}.project-thumbs img{display:block;width:60px;height:60px;object-fit:cover;border-radius:5px}#project-editor-images{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}#project-editor-images>div{display:grid;gap:6px;align-content:start}#project-editor-images img{width:100%;height:100px;object-fit:cover;border-radius:8px}#project-editor-images button{padding:6px;font-size:11px}@media(hover:none){.project-caption{opacity:1;transform:none}}@media(max-width:800px){.project-detail{grid-template-columns:1fr}.project-information{position:static}.project-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-admin-row{flex-wrap:wrap}.project-admin-row .actions{width:100%}#project-editor-images{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:480px){.student-project-grid{columns:2 120px;column-gap:10px}.student-project-tile{margin-bottom:10px}.project-caption{padding:9px;inset:auto 5px 5px}.project-caption small{font-size:10px}.project-preview-grid{grid-template-columns:1fr}.project-image-controls{gap:8px}}@media(prefers-reduced-motion:reduce){.student-project-tile>img,.project-caption{transition:none}}


.student-project-tile>img,.project-main-image{aspect-ratio:auto;max-height:none;object-fit:contain}
.project-thumbs img{width:auto;max-width:120px;height:60px;object-fit:contain}
.project-admin-row>img{height:auto;max-height:90px;object-fit:contain}
#project-editor-images img{object-fit:contain}
.project-saved-filter{align-self:end;min-height:42px;border-radius:12px;gap:9px}
.project-saved-filter.is-active{color:#ffffff;border-color:#ffffff;background:#ffffff16}
.project-saved-filter.is-active svg{fill:#ffffff33}