#code-editor { flex: 1; min-height: 0; overflow: hidden; }
#code-editor .line-numbers { padding: 0; background: transparent; font: inherit; white-space: normal; }
.code-editor-toolbar { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 12px; border-bottom: 1px solid var(--line); background: #fafbf9; font-size: 10px; }
.code-editor-path { flex: 1; color: var(--muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-editor-toolbar label { display: flex; align-items: center; gap: 5px; }
.code-editor-toolbar select { max-width: 140px; border: 1px solid var(--line); border-radius: 4px; background: white; padding: 3px; font-size: 10px; }
#code-wrap[aria-pressed=true] { color: var(--green); background: var(--green-soft); }
.resource-preview.media-viewer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #f1f3f0; }
.media-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; min-height: 0; }
.media-viewer video { width: 100%; max-height: calc(100% - 90px); background: #17211d; border-radius: 6px; }
.media-viewer audio { width: min(640px, 100%); }
.media-actions { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.media-status { font-size: 12px; color: var(--muted); text-align: center; }
.media-viewer.zoomed { justify-content: flex-start; align-items: flex-start; }
.media-viewer.zoomed img { max-width: none; max-height: none; object-fit: none; }
.media-viewer.zoomed .media-actions { align-self: center; }
@media (max-width: 760px) { .code-editor-path { display: none; } .code-editor-toolbar { flex-wrap: wrap; } .code-editor-overview { padding: 8px; } }