.skin-pack-creator__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
    gap: 1.25rem;
    align-items: start;
}

.skin-pack-creator__workspace,
.skin-pack-creator__preview,
.skin-pack-creator__settings {
    background: linear-gradient(180deg, rgba(20, 20, 24, 0.94), rgba(10, 10, 13, 0.97));
}

.skin-pack-creator__upload-head,
.skin-pack-creator__list-head,
.skin-pack-creator__panel-head,
.skin-pack-creator__cover > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.skin-pack-creator h2,
.skin-pack-creator h3,
.skin-pack-creator p { margin: 0; }

.skin-pack-creator__upload-head h2,
.skin-pack-creator__list-head h2,
.skin-pack-creator__preview h2,
.skin-pack-creator__settings h2 {
    margin-top: 0.65rem;
    color: #fff8ef;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}

.skin-pack-creator__upload-head p:not(.section-label),
.skin-pack-creator__list-head p,
.skin-pack-creator__preview > p,
.skin-pack-creator__privacy {
    margin-top: 0.65rem;
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.65;
}

.skin-pack-creator__clear { flex: 0 0 auto; }

.skin-pack-creator__dropzone {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    min-height: 13rem;
    margin-top: 1.5rem;
    border: 1px dashed rgba(110, 231, 183, 0.4);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 50% 14%, rgba(110, 231, 183, 0.14), transparent 40%),
        rgba(255, 255, 255, 0.025);
    color: var(--text-soft);
    cursor: pointer;
    overflow: hidden;
    padding: 1.75rem;
    text-align: center;
    transition: border-color var(--transition-soft), background var(--transition-soft), transform var(--transition-soft);
}

.skin-pack-creator__dropzone:hover,
.skin-pack-creator__dropzone.is-dragover {
    border-color: #6ee7b7;
    background:
        radial-gradient(circle at 50% 14%, rgba(110, 231, 183, 0.22), transparent 43%),
        rgba(255, 255, 255, 0.04);
}

.skin-pack-creator__dropzone.is-dragover { transform: translateY(-2px); }
.skin-pack-creator__dropzone input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.skin-pack-creator__dropzone strong { color: #fff8ef; font-size: 1rem; }
.skin-pack-creator__dropzone small { color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; }

.skin-pack-creator__dropzone-icon,
.skin-pack-creator__empty-icon {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    background: #9df3c5;
    mask: url('/assets/icons/tools/skin-edit.svg') center / contain no-repeat;
    -webkit-mask: url('/assets/icons/tools/skin-edit.svg') center / contain no-repeat;
}

.skin-pack-creator__dropzone-icon { margin-bottom: 0.25rem; filter: drop-shadow(0 0.7rem 1rem rgba(110, 231, 183, 0.16)); }

.skin-pack-creator__list-head { margin-top: 1.75rem; }
.skin-pack-creator__list-head h2 span { color: #8ff0bc; font-size: 0.82rem; font-weight: 700; }

.skin-pack-creator__empty {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-soft);
    padding: 3.4rem 1.5rem;
    text-align: center;
}

.skin-pack-creator__empty-icon { width: 2.25rem; height: 2.25rem; opacity: 0.48; }
.skin-pack-creator__empty strong { color: #f4eee8; }
.skin-pack-creator__empty p { font-size: 0.82rem; line-height: 1.55; }
.skin-pack-creator__empty[hidden], .skin-pack-creator__grid[hidden] { display: none; }

.skin-pack-creator__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}

.skin-pack-creator__card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.035);
    transition: transform var(--transition-soft), border-color var(--transition-soft), opacity var(--transition-soft);
}

.skin-pack-creator__card:hover { transform: translateY(-2px); border-color: rgba(110, 231, 183, 0.48); }
.skin-pack-creator__card.is-dragging { opacity: 0.48; }

.skin-pack-creator__card-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 9.5rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent),
        rgba(0, 0, 0, 0.2);
}

.skin-pack-creator__card-art img {
    width: 68%;
    height: 8.2rem;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.skin-pack-creator__order,
.skin-pack-creator__remove {
    position: absolute;
    top: 0.6rem;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: rgba(10, 10, 13, 0.78);
    color: #f8f1e8;
    font-size: 0.7rem;
    font-weight: 800;
}

.skin-pack-creator__order { left: 0.6rem; }
.skin-pack-creator__remove { right: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer; }
.skin-pack-creator__remove:hover { border-color: rgba(255, 137, 137, 0.8); color: #ffc1c1; }

.skin-pack-creator__card-body { padding: 0.75rem; }
.skin-pack-creator__card-body input,
.skin-pack-creator__card-body select,
.skin-pack-creator__settings input,
.skin-pack-creator__settings textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 0.65rem;
    background: rgba(4, 4, 7, 0.45);
    color: #f8f1e8;
    font: inherit;
    outline: none;
}

.skin-pack-creator__card-body input { padding: 0.58rem 0.62rem; font-size: 0.78rem; }
.skin-pack-creator__card-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.58rem; }
.skin-pack-creator__card-meta select { padding: 0.42rem 0.5rem; font-size: 0.7rem; }
.skin-pack-creator__card-meta span { margin-left: auto; color: rgba(255, 255, 255, 0.38); font-size: 0.72rem; cursor: grab; }

.skin-pack-creator__sidebar { position: sticky; top: 1.25rem; display: grid; gap: 1.25rem; }
.skin-pack-creator__panel-head { align-items: center; }
.skin-pack-creator__panel-head h2 { margin: 0; font-size: 1.05rem; }
.skin-pack-creator__panel-head span { color: var(--text-soft); font-size: 0.75rem; }

.skin-pack-creator__cover {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 13.75rem;
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 50% 18%, rgba(110, 231, 183, 0.22), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.25));
}

.skin-pack-creator__cover img { width: 46%; height: 11.4rem; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; }
.skin-pack-creator__cover > div { position: absolute; right: 0.8rem; bottom: 0.75rem; left: 0.8rem; align-items: flex-end; }
.skin-pack-creator__cover strong { color: #fff; font-size: 0.86rem; text-shadow: 0 2px 10px #000; }
.skin-pack-creator__cover span { color: #a8f5cb; font-size: 0.7rem; text-shadow: 0 2px 10px #000; }

.skin-pack-creator__settings h2 { margin: 0 0 1.2rem; font-size: 1.05rem; }
.skin-pack-creator__settings label { position: relative; display: block; margin-top: 0.9rem; }
.skin-pack-creator__settings label > span { display: block; margin-bottom: 0.42rem; color: #d8d0c8; font-size: 0.77rem; }
.skin-pack-creator__settings em { color: #ff9b9b; font-style: normal; }
.skin-pack-creator__settings input { height: 2.5rem; padding: 0 0.75rem; font-size: 0.82rem; box-sizing: border-box; }
.skin-pack-creator__settings textarea { min-height: 5.4rem; padding: 0.72rem 0.75rem; resize: vertical; box-sizing: border-box; font-size: 0.82rem; }
.skin-pack-creator__settings input:focus, .skin-pack-creator__settings textarea:focus, .skin-pack-creator__card-body input:focus, .skin-pack-creator__card-body select:focus { border-color: rgba(110, 231, 183, 0.68); box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.1); }
.skin-pack-creator__settings small { position: absolute; right: 0.7rem; bottom: 0.68rem; color: rgba(255, 255, 255, 0.36); font-size: 0.64rem; }

.skin-pack-creator__notice { display: flex; gap: 0.65rem; align-items: flex-start; margin-top: 1rem; border: 1px solid rgba(244, 190, 91, 0.35); border-radius: 0.75rem; background: rgba(244, 190, 91, 0.08); color: #f7d896; padding: 0.7rem; }
.skin-pack-creator__notice.is-ready { border-color: rgba(110, 231, 183, 0.35); background: rgba(110, 231, 183, 0.09); color: #a8f5cb; }
.skin-pack-creator__notice.is-error { border-color: rgba(255, 128, 128, 0.5); background: rgba(255, 128, 128, 0.1); color: #ffc1c1; }
.skin-pack-creator__notice > span { flex: 0 0 0.55rem; width: 0.55rem; height: 0.55rem; margin-top: 0.25rem; border-radius: 999px; background: currentColor; }
.skin-pack-creator__notice p { font-size: 0.72rem; line-height: 1.55; }
.skin-pack-creator__generate { width: 100%; margin-top: 0.85rem; padding: 0.85rem 1rem; border-radius: 0.75rem; }
.skin-pack-creator__privacy { text-align: center; font-size: 0.68rem; }
.skin-pack-creator__error { margin-top: 0.75rem; color: #ffc1c1; font-size: 0.8rem; }

.skin-pack-creator__guide { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2.5rem; margin-top: 3.8rem; padding-top: 2.2rem; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.skin-pack-creator__guide h2 { max-width: 27rem; margin-top: 0.7rem; color: #fff8ef; font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.12; }
.skin-pack-creator__guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.skin-pack-creator__guide-grid article { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 1rem; background: rgba(255, 255, 255, 0.025); padding: 1rem; }
.skin-pack-creator__guide-grid article > span { color: #9df3c5; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; }
.skin-pack-creator__guide-grid h3 { margin-top: 1rem; color: #fff8ef; font-size: 0.9rem; }
.skin-pack-creator__guide-grid p { margin-top: 0.5rem; color: var(--text-soft); font-size: 0.75rem; line-height: 1.58; }
.skin-pack-creator code { color: #a8f5cb; }

@media (max-width: 980px) {
    .skin-pack-creator__layout { grid-template-columns: 1fr; }
    .skin-pack-creator__sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .skin-pack-creator__upload-head, .skin-pack-creator__sidebar, .skin-pack-creator__guide { display: grid; grid-template-columns: 1fr; }
    .skin-pack-creator__clear { justify-self: start; }
    .skin-pack-creator__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skin-pack-creator__guide { gap: 1.4rem; margin-top: 2.5rem; }
    .skin-pack-creator__guide-grid { grid-template-columns: 1fr; }
}