/* Zelsperion — Minecraft skin studio */
.zels-studio {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(220px, 1fr);
    gap: clamp(18px, 3vw, 35px);
    align-items: start;
    margin-top: 26px;
}
.zels-studio-preview {
    display: grid;
    place-items: center;
    min-height: 438px;
    padding: 10px;
    border: 1px solid rgba(233, 153, 54, .24);
    border-radius: 18px;
    background: radial-gradient(circle at 50% 30%, #34454c 0%, #19242b 64%, #11191e 100%);
    overflow: hidden;
}
.zels-studio-preview canvas {
    display: block;
    width: min(100%, 320px);
    height: auto;
    aspect-ratio: 320 / 420;
    cursor: grab;
}
.zels-studio-preview canvas:active { cursor: grabbing; }
.zels-studio-editor {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-top: 6px;
}
.zels-studio-editor h3 {
    font-size: 1.12rem;
    font-weight: 750;
    color: #e8edf0;
    margin: 0;
}
.zels-studio-editor p {
    margin: 0;
    line-height: 1.6;
    color: #92a0aa;
    font-size: .86rem;
}
.zels-studio-file {
    display: block;
    width: 100%;
    padding: 11px;
    border: 1px dashed rgba(233,153,54,.45);
    border-radius: 10px;
    color: #e8edf0;
    background: #131d23;
    font: inherit;
    font-size: .8rem;
}
.zels-studio-file::file-selector-button {
    padding: 8px 11px;
    margin-right: 10px;
    border: 0;
    border-radius: 7px;
    background: #2d3a40;
    color: #ffc477;
    cursor: pointer;
}
.zels-studio-actions { display:flex; flex-wrap:wrap; gap:9px; }
.zels-studio-action {
    min-height: 41px;
    padding: 9px 14px;
    border: 1px solid rgba(233,153,54,.45);
    border-radius: 9px;
    background: rgba(233,153,54,.09);
    color: #ffc477;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}
.zels-studio-action:hover:not(:disabled) { background:rgba(233,153,54,.18); }
.zels-studio-action:disabled { opacity:.45; cursor:not-allowed; }
.zels-studio-action.is-primary { background:#e99936; color:#10151a; }
.zels-studio-action.is-primary:hover:not(:disabled) { background:#ffc477; }
.zels-studio-status { color:#a8c8b0; min-height:1.8em; font-size:.8rem; }
.zels-studio-status.is-error { color:#eaa0a0; }
@media(max-width:680px) {
    .zels-studio { grid-template-columns:1fr; }
    .zels-studio-preview { min-height:390px; }
    .zels-studio-preview canvas { max-height:380px; }
}