/* Saved Player Card cosmetic looks — 1 free, nine 150 SG slots. */
.account-cosmetic-presets {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(183,138,213,.36);
    border-radius: 15px;
    background: linear-gradient(145deg,rgba(126,78,155,.15),rgba(27,17,42,.2));
}
.account-cosmetic-presets-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}
.account-cosmetic-presets-heading h4 {
    margin:4px 0 7px;
    font-size:1.05rem;
    color:#f9e8ff;
}
.account-cosmetic-presets-heading small {
    display:block;
    max-width:520px;
    color:#dac4e5;
    line-height:1.5;
}
.account-cosmetic-presets-count {
    flex-shrink:0;
    padding:7px 10px;
    border:1px solid rgba(246,205,169,.4);
    border-radius:999px;
    background:rgba(247,205,169,.11);
    color:#f7cda9;
    font-weight:800;
    font-size:.78rem;
}
.account-cosmetic-presets-navigation {
    width:100%;
    max-width:520px;
    box-sizing:border-box;
    margin-inline:auto;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    gap:10px;
    align-items:center;
}
.account-cosmetic-presets .account-cosmetic-presets-arrow {
    width:44px;
    height:44px;
    margin:0;
    padding:0;
    border:1px solid #ba8fc2;
    border-radius:10px;
    color:#f6e7ff;
    background:rgba(142,85,170,.25);
    font-size:1.7rem;
    font-weight:800;
    line-height:1;
    cursor:pointer;
}
.account-cosmetic-presets .account-cosmetic-presets-arrow:hover:not(:disabled) {
    background:rgba(174,113,201,.45);
    border-color:#e5b9ed;
}
.account-cosmetic-presets .account-cosmetic-presets-arrow:disabled {
    opacity:.35;
    cursor:not-allowed;
}
.account-cosmetic-presets .account-cosmetic-presets-arrow:focus-visible {
    outline:2px solid #f7cda9;
    outline-offset:2px;
}
.account-cosmetic-presets-position {
    display:block;
    min-width:0;
    text-align:center;
    font-size:.82rem;
    font-weight:800;
    color:#f7d4ec;
}
.account-cosmetic-presets-list {
    width:100%;
    max-width:520px;
    min-width:0;
    box-sizing:border-box;
    margin-inline:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    touch-action:pan-y;
}
.account-cosmetic-presets-swipe-hint {
    display:none;
    color:#bfa8d4;
    font-size:.71rem;
    text-align:center;
}
.account-cosmetic-preset-card {
    min-width:0;
    padding:12px;
    display:grid;
    align-content:start;
    gap:10px;
    border:1px solid rgba(175,129,198,.45);
    border-radius:12px;
    background:linear-gradient(155deg,rgba(72,49,94,.75),rgba(34,27,55,.8));
}
.account-cosmetic-preset-card-heading {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
}
.account-cosmetic-preset-card-heading strong {
    color:#f7e4ff;
    font-weight:900;
    font-size:.87rem;
}
.account-cosmetic-preset-card-heading span {
    border:1px solid rgba(247,205,169,.3);
    border-radius:99px;
    padding:3px 8px;
    color:#f7cda9;
    font-size:.66rem;
    font-weight:700;
}
.account-cosmetic-preset-name {
    display:grid;
    gap:5px;
}
.account-cosmetic-preset-name small {
    color:#d9c5e8;
    font-size:.73rem;
}
.account-cosmetic-preset-name input {
    width:100%;
    min-width:0;
    box-sizing:border-box;
    padding:10px 11px;
    border:1px solid #a781c0;
    border-radius:9px;
    background:#241b35;
    color:#fff5ff;
    font-size:.88rem;
}
.account-cosmetic-preset-name input:focus-visible {
    outline:2px solid #e3b5fb;
    outline-offset:2px;
}
.account-cosmetic-preset-note {
    min-height:2em;
    color:#decadf;
    font-size:.7rem;
    line-height:1.4;
}
.account-cosmetic-preset-actions {
    display:grid;
    width:100%;
    min-width:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
}
/* Save/Overwrite gets a full row; Apply and Rename sit side by side.
   This prevents long labels overflowing narrow mobile preset cards. */
.account-cosmetic-preset-actions > :first-child {
    grid-column:1 / -1;
}
.account-cosmetic-presets .account-cosmetic-preset-action {
    display:block;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:9px 8px;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.3;
    text-align:center;
    border:1px solid #ba8fc2;
    border-radius:9px;
    background:rgba(142,85,170,.22);
    color:#f8eaff;
    font-size:.75rem;
    font-weight:800;
    cursor:pointer;
}
.account-cosmetic-presets .account-cosmetic-preset-action:hover:not(:disabled) {
    background:rgba(174,113,201,.4);
    border-color:#e5b9ed;
}
.account-cosmetic-presets .account-cosmetic-preset-action:disabled {
    opacity:.5;
    cursor:not-allowed;
}
.account-cosmetic-presets #cosmetic-presets-unlock-next {
    width:100%;
    max-width:520px;
    box-sizing:border-box;
    min-width:0;
    margin:0 auto;
    padding:12px;
    border:1px solid #d59a5c;
    border-radius:10px;
    color:#ffe4be;
    background:rgba(213,154,92,.2);
    font-weight:900;
    font-size:.83rem;
}
.account-cosmetic-presets #cosmetic-presets-unlock-next:hover:not(:disabled) {
    background:rgba(213,154,92,.34);
}
.account-cosmetic-presets #cosmetic-presets-unlock-next:disabled {
    opacity:.55;
    cursor:not-allowed;
}
#account-cosmetic-preset-status {
    color:#efd8e8;
    line-height:1.5;
    font-size:.75rem;
}
@media(max-width:620px) {
    .account-cosmetic-presets {
        padding:11px;
    }
    .account-cosmetic-presets-navigation {
        gap:7px;
    }
    .account-cosmetic-presets-swipe-hint {
        display:block;
    }
}