.self-dress-up-page h2 { color: var(--text-primary, #2A2328); font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 8px; padding: 0; }
.self-dress-up-page [hidden] { display: none !important; }
.self-loading { margin-top: 16px; }
.self-loading-label { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 16px; color: var(--text-secondary, #6E626A); font-size: 12px; }
.self-loading-block { position: relative; overflow: hidden; border-radius: 8px; background: #F3F4F6; }
.self-loading-block::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%); transform: translateX(-100%); animation: self-loading-shimmer 1.8s ease-in-out infinite; }
.self-loading-button { height: 48px; }
.self-loading-heading { width: 128px; height: 16px; margin: 28px 0 30px; border-radius: 4px; }
.self-loading-card { aspect-ratio: 3 / 4; }
.self-loading[data-refreshing="true"] .self-loading-layout { display: none; }
.self-loading-label::before, #selfStatus[data-busy="true"]:not(:empty)::before, #selfCreateStatus[data-busy="true"]:not(:empty)::before { content: ''; display: inline-block; box-sizing: border-box; flex-shrink: 0; width: 14px; height: 14px; border: 2px solid #E5E7EB; border-top-color: var(--text-secondary, #6E626A); border-radius: 50%; animation: self-loading-spin .8s linear infinite; }
#selfStatus[data-busy="true"]:not(:empty)::before, #selfCreateStatus[data-busy="true"]:not(:empty)::before { margin-right: 8px; vertical-align: -2px; }
@keyframes self-loading-shimmer { to { transform: translateX(100%); } }
@keyframes self-loading-spin { to { transform: rotate(360deg); } }
.self-section { margin-top: 16px; }
#selfLooks { margin-top: 16px; }
.self-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.self-image-choice { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; border: 0; border-radius: 8px; background: #fff; color: var(--text-primary, #2A2328); font: inherit; font-size: 12px; cursor: pointer; }
.self-image-choice img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 8px; }
.self-outfit-grid img { display: block; aspect-ratio: 1; object-fit: contain; }
#selfPresets .self-image-choice[aria-pressed="true"] img, #selfOutfits .self-image-choice[aria-pressed="true"] img { box-shadow: 0 0 0 2px var(--primary-accent); }
.self-image-choice:focus-visible { outline: 2px solid var(--text-primary, #2A2328); outline-offset: 2px; }
.self-dress-up-page button:disabled { opacity: .5; cursor: default; }
.self-outfit-filter { margin: 0 0 8px; padding: 0; }
.self-outfit-filter .album-filter-button { min-height: 36px; }
.self-note { color: var(--text-secondary, #6E626A); font-size: 12px; line-height: 1.6; margin: 10px 0; }
.self-quota { display: table; margin: 10px 0; padding: 3px 5px; border-radius: 999px; background: #ece9ed; color: #756e76; font-size: 10px; font-weight: 500; line-height: 1.2; }
.self-quota:empty { display: none; }
.self-dress-up-page .custom-cast-button { box-sizing: border-box; min-height: 44px; padding: 6px 12px; font-size: 13px; line-height: 1.4; }
#selfStatus { font-size: 14px; }
.self-anime { display: flow-root; }
.self-anime img { display: block; width: auto; max-width: 100%; height: auto; max-height: 260px; object-fit: contain; border-radius: 8px; margin: 12px auto; }
.self-anime-actions { display: flex; flex-direction: column; gap: 8px; }
#selfStatus:empty { display: none; }

/* Keep related controls close, with a larger break before the next section. */
#selfOutfits + #selfGenerate { margin-top: 12px; }
#selfMoreImages { margin-top: 12px; }

.self-dress-up-page #selfGenerate, .self-dress-up-page #selfAnimeGenerate { width: 100%; min-height: 48px; background: var(--button-primary-bg, #F657B5); color: var(--button-primary-text, #FFF); font-size: 14px; font-weight: 700; }

.self-outfit-label { font-size: 12px; font-weight: 700; text-align: left; }
.self-outfit-detail { margin-top: -4px; color: var(--text-secondary, #6E626A); font-size: 11px; text-align: left; }
.self-custom-outfit-field { margin-top: 12px; }
.self-custom-outfit-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.self-custom-outfit-field input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #D9DDE3; border-radius: 8px; background: #FFF; color: var(--text-primary, #2A2328); font: inherit; font-size: 13px; }
.self-custom-outfit-field .self-note { display: block; margin: 4px 0 0; text-align: right; }

.self-preset-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.self-preset-list::-webkit-scrollbar { display: none; }
.self-preset-list .self-image-choice { flex: 0 0 calc((100% - 16px) / 3); }
.self-preset-list img { aspect-ratio: 2 / 3; object-fit: contain; }

.self-preset-list .self-add-image { box-sizing: border-box; aspect-ratio: 2 / 3; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(36, 39, 44, .14); background: #F8F8FA; color: var(--text-secondary, #6E626A); font-size: 11px; font-weight: 600; }
.self-custom-outfit-card { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; aspect-ratio: 1; border: 1px solid rgba(36, 39, 44, .14); border-radius: 8px; background: #F8F8FA; color: var(--text-secondary, #6E626A); font-size: 11px; font-weight: 600; }
.self-custom-outfit-choice[aria-pressed="true"] .self-custom-outfit-card { box-shadow: 0 0 0 2px var(--primary-accent); }
.self-add-plus { font-size: 28px; font-weight: 400; line-height: 1; }

.self-saved-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; padding: 2px; }
.self-used-badge { position: absolute; bottom: 6px; left: 6px; padding: 3px 6px; border-radius: 4px; background: #FFF; color: var(--text-primary, #2A2328); font-size: 11px; font-weight: 700; line-height: 1.4; }
.self-create-modal { box-sizing: border-box; width: calc(100% - 24px); margin: auto; color: var(--text-primary, #2A2328); }
.self-create-modal::backdrop { background: rgba(0, 0, 0, .6); }
.self-create-modal #selfLooksTitle { padding-right: 36px; }
.self-create-modal #selfCreateStatus:empty, #selfLooksStatus:empty { display: none; }
.self-dress-up-page:has(#selfCreateModal[open], #selfLooksModal[open]) { overflow: hidden; }

.self-create-modal:not([open]) { display: none; }

.self-dressing-room { text-align: left; scroll-margin-top: 16px; }
.self-puri-link { display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; text-decoration: none; }
.self-closet { margin-top: 28px; }
.self-closet > .self-note { margin: 0 0 12px; }
.self-saved-list .self-image-choice[aria-pressed="true"] { outline: 2px solid var(--primary-accent); outline-offset: 2px; }
.self-completion { text-align: center; }
.self-completion h3 { margin: 16px 0; font-size: 17px; color: var(--text-primary); }
.self-completion > img { display: block; width: 100%; height: auto; max-height: 46svh; object-fit: contain; border-radius: 8px; animation: self-coordinate-reveal 420ms ease-out both; }
.self-completion > button { width: 100%; margin-top: 8px; }
.self-dress-up-page #selfCompletionEquip { background: var(--button-primary-bg, #F657B5); color: #FFF; font-weight: 700; }
@keyframes self-coordinate-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .self-completion > img { animation: none; }
    .self-loading-block::after, .self-loading-label::before, #selfStatus[data-busy="true"]::before, #selfCreateStatus[data-busy="true"]::before { animation: none; }
}


#selfCreateForm { scroll-margin-top: 16px; }
.self-current-look { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.self-current-look h2 { margin: 0; }
.self-current-look img { display: block; width: 36px; height: 36px; flex: 0 0 36px; object-fit: cover; object-position: center top; border-radius: 50%; background: #F3F4F6; }
.self-current-look button { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--text-primary, #2A2328); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.self-current-look button:focus-visible { outline: 2px solid var(--text-primary, #2A2328); outline-offset: 2px; }
.self-outfit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; row-gap: 16px; overflow: visible; padding: 2px; }
.self-looks-modal #selfLooks { margin-top: 16px; }
#selfLooksStatus[data-busy="true"]:not(:empty)::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid #E5E7EB; border-top-color: var(--text-secondary, #6E626A); border-radius: 50%; vertical-align: -2px; animation: self-loading-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { #selfLooksStatus[data-busy="true"]::before { animation: none; } }

.self-saved-card { min-width: 0; }
.self-saved-card > .self-image-choice { width: 100%; }
.self-delete-image { width: 100%; margin-top: 4px; }