.class-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; margin-bottom: 20px; background: var(--surface-subtle, #edf2fa); }
.class-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.class-cover__fallback { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text-secondary, #52627a); font-size: 14px; font-weight: 600; }
.class-cover__fallback i { font-size: 30px; color: var(--accent-primary, #2457d6); }
.tw-thumbnail-editor { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px; align-items: center; margin: 24px 0; padding: 20px; border: 1px solid var(--line-subtle); border-radius: 14px; }
.tw-thumbnail-editor img, .tw-thumbnail-placeholder, .tw-class-cover { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 10px; }
.tw-thumbnail-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: var(--text-secondary); background: var(--surface-subtle); }
.tw-thumbnail-placeholder i { font-size: 28px; }
.tw-thumbnail-editor input { max-width: 100%; font: inherit; font-size: 13px; }
.tw-thumbnail-editor input::file-selector-button { padding: 10px 14px; border: 1px solid var(--line-subtle); border-radius: 8px; margin-right: 10px; background: var(--surface-bg); color: var(--text-primary); cursor: pointer; }
@media(max-width: 640px) { .tw-thumbnail-editor { grid-template-columns: 1fr; padding: 16px; gap: 16px; } }