.skill-cover-card { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ui-control-radius, 10px); background: var(--ui-surface-muted, #171a1d); }
.skill-cover-card img, .skill-cover-preview img, .skill-cover-option img { display: block; width: 100%; height: 100%; object-fit: contain; }
.skill-cover-detail { width: 100%; margin: 0 0 20px; aspect-ratio: 16 / 9; max-height: 320px; overflow: hidden; text-align: center; background: var(--ui-surface-muted, #171a1d); border-radius: var(--ui-control-radius, 10px); }
.skill-cover-detail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.skill-cover-editor { display: flex; gap: 16px; align-items: center; margin: 16px 0; }
.skill-cover-preview { width: min(220px, 40%); aspect-ratio: 4 / 3; flex: 0 0 auto; border-radius: var(--ui-control-radius, 10px); overflow: hidden; background: var(--ui-surface-muted, #171a1d); }
.skill-cover-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.skill-cover-controls strong { flex-basis: 100%; }
.skill-cover-dialog { width: min(800px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-container-radius, 16px); background: var(--ui-surface); color: var(--ui-text); }
.skill-cover-dialog::backdrop { background: #0009; }
.skill-cover-dialog > button { display: block; margin: 0 0 16px auto; }
.skill-cover-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.skill-cover-option { padding: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ui-surface-muted, #171a1d); }
.skill-cover-option:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.skill-cover-editor [hidden], .skill-cover-card[hidden], .skill-cover-detail[hidden] { display: none; }
@media (max-width: 480px) { .skill-cover-editor { align-items: start; } .skill-cover-controls { flex-direction: column; align-items: start; } }

.composer-reference-workspace[data-mode="skills"] .composer-project-list { align-items: start; }