[hidden] { display: none !important; }
.class-gallery-panel { margin-top: 22px; }
.class-gallery-panel h2, .section-head h2 { margin: .15em 0; }
.class-lock { background: #e7f2ee; color: var(--ok); border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 850; white-space: nowrap; }
.class-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.class-work { background: #fff7df; border: 1px solid #ebc979; border-radius: 16px; padding: 18px; display: grid; gap: 12px; }
.class-work-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.class-work p { margin: 0; }
.class-work .cree-copy { font-size: 18px; font-weight: 750; color: var(--navy); }
.class-media { min-height: 72px; border: 1px dashed #d8b96d; border-radius: 12px; padding: 10px; background: white; display: grid; place-items: center; }
.class-media img, .class-media video { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 9px; }
.class-media audio { width: 100%; }
.class-empty { grid-column: 1 / -1; display: grid; gap: 4px; padding: 22px; border: 1px dashed #d9c8ad; border-radius: 14px; color: #65708a; }
.class-empty strong { color: var(--navy); }
.student-top-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.class-work-button { background: linear-gradient(135deg, #007f77, #075f83); color: white; }
.class-work-button span { display: inline-grid; min-width: 26px; height: 26px; margin-left: 7px; padding: 0 7px; place-items: center; border-radius: 999px; background: white; color: #075f83; }
.featured-class-gallery { border: 2px solid #61b9ae; box-shadow: 0 18px 45px #007f7717; scroll-margin-top: 94px; }
.portfolio-section-title { margin: 30px 4px 12px; }
.portfolio-section-title h2 { margin: .15em 0; }
@media (max-width: 820px) { .class-gallery { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .student-top-actions { width: 100%; display: grid; } .student-top-actions button { width: 100%; } }
@media (max-width: 520px) { .section-head, .class-work-head { align-items: flex-start; flex-direction: column; } .class-lock { white-space: normal; } .class-media video { max-height: 300px; } }