/* éditeur de skins */
#editor { padding: 18px 24px 60px; max-width: 1640px; margin: 0 auto; }
.skined { display: grid; grid-template-columns: 230px 480px 1fr; gap: 18px; align-items: start; }
.skined .list { display: flex; flex-direction: column; gap: 6px; background: var(--panel, #241c16); border: 1px solid var(--line, #3a2e24); border-radius: 14px; padding: 12px; position: sticky; top: 90px; }
.skined .list button { display: flex; align-items: center; gap: 8px; text-align: left; }
.skined .list button img { width: 34px; height: 34px; }
.skined .list .grp { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent, #f2a541); margin-top: 6px; font-weight: 800; }
.skined .stage { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 10px; }
.skined canvas { width: 460px; height: 460px; border-radius: 16px; border: 1px solid var(--line, #3a2e24); background: #1a1410; }
.skined .pvctl { display: flex; gap: 10px; flex-wrap: wrap; }
.skined .pvctl label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mute, #a99); }
.skined .avatars { display: flex; gap: 8px; flex-wrap: wrap; max-width: 460px; }
.skined .avatars figure { margin: 0; text-align: center; background: #0003; border-radius: 12px; padding: 6px; }
.skined .avatars img { width: 80px; height: 80px; }
.skined .avatars figcaption { font-size: 11px; color: var(--mute, #a99); }
.skined .parts fieldset { margin-top: 12px; }
.skined .parts .val { color: var(--accent, #f2a541); font-weight: 800; margin-left: 4px; }
.skined .parts input[type=range] { width: 100%; accent-color: var(--accent, #f2a541); }
.skined .colorpick { display: flex; align-items: center; gap: 8px; }
.skined .colorpick input[type=color]:disabled { opacity: .35; }
@media (max-width: 1250px) { .skined { grid-template-columns: 1fr; } .skined .list, .skined .stage { position: static; } }
.skined .imgfield { display: flex; flex-direction: column; gap: 4px; font-size: 12px; grid-column: 1 / -1; }
.skined .imgfield .lbl { color: var(--mute, #a99); }
.skined .imgrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.skined .imgrow select { flex: 1; min-width: 160px; }
.skined .thumb { width: 40px; height: 40px; border-radius: 8px; background: repeating-conic-gradient(#3a2e24 0 25%, #2a211a 0 50%) 0 0 / 12px 12px; display: grid; place-items: center; overflow: hidden; }
.skined .thumb img { max-width: 100%; max-height: 100%; }
.skined .thumb i { color: var(--mute, #a99); }
.skined .btn.small { display: inline-flex; align-items: center; cursor: pointer; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line, #3a2e24); background: #0003; font-size: 12px; }
.skined .imglib { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.skined .imglib figure { margin: 0; position: relative; width: 104px; text-align: center; background: #0003; border-radius: 10px; padding: 6px; }
.skined .imglib img { width: 64px; height: 64px; object-fit: contain; background: repeating-conic-gradient(#3a2e24 0 25%, #2a211a 0 50%) 0 0 / 12px 12px; border-radius: 6px; }
.skined .imglib figcaption { font-size: 10px; word-break: break-all; color: var(--mute, #a99); }
.skined .imglib button { position: absolute; top: 2px; right: 2px; padding: 0 6px; }