.cosmetic-cover__deco {position: absolute;inset: 0;width: 100%;height: 100%;pointer-events: none}
.cover-wave--triple {height: 26px}
.cosmetic-cover--ocean {background: linear-gradient(
135deg,
var(--cc-from, #06b6d4) 0%,
var(--cc-via, #3b82f6) 50%,
var(--cc-to, #6366f1) 100%
)}
.cosmetic-cover--watermelon-flesh {background:
linear-gradient(180deg, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.38) 70%, rgba(255, 255, 255, 0.1) 100%),
radial-gradient(120% 140% at 50% -30%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 58%),
linear-gradient(180deg, var(--cc-flesh, #f43f5e) 0%, rgba(0, 0, 0, 0.28) 190%)}
.cosmetic-cover--suminagashi {background:
linear-gradient(170deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 55%, rgba(0, 0, 0, 0.13) 100%),
var(--cc-paper, #f5f5f5)}
.cosmetic-cover--isaribi {background: linear-gradient(
180deg,
var(--cc-sky, #0b1e3d) 0%,
var(--cc-sky, #0b1e3d) 46%,
var(--cc-sea, #1e4a86) 63%,
var(--cc-sea, #1e4a86) 100%
)}
.cosmetic-settings {max-width: 900px;margin: 20px auto;padding: 20px;font-family: var(--font-family-base)}
.cosmetic-settings__back {display: inline-flex;align-items: center;gap: 4px;margin-bottom: 12px;font-size: 0.78rem;font-weight: 600;color: var(--color-text-muted);text-decoration: none}
.cosmetic-settings__back:hover {color: var(--color-aqua-600, #0891b2)}
.cosmetic-settings__back svg {width: 14px;height: 14px}
.cosmetic-settings__title {margin: 0 0 6px;font-size: 1.1rem;font-weight: 700;color: var(--color-text-primary)}
.cosmetic-settings__lead {margin: 0 0 18px;font-size: 0.82rem;line-height: 1.7;color: var(--color-text-muted);overflow-wrap: anywhere}
.cosmetic-settings__section {background: #fff;border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);padding: 18px 16px;margin-bottom: 20px}
.cosmetic-settings__section-title {margin: 0 0 4px;font-size: 0.92rem;font-weight: 700;color: var(--color-text-primary)}
.cosmetic-settings__section-note {margin: 0 0 14px;font-size: 0.76rem;color: var(--color-text-muted);overflow-wrap: anywhere}
.cosmetic-preview {border-radius: var(--radius-md);overflow: hidden;box-shadow: var(--shadow-sm);margin-bottom: 18px}
.cosmetic-preview__body {background: #fff;padding: 0 16px 14px}
.cosmetic-preview__avatar-row {display: flex;align-items: flex-start;gap: 12px;margin-top: -32px}
.cosmetic-preview__name {padding-top: 36px;font-size: 1rem;font-weight: 700;color: var(--color-text-primary);min-width: 0;overflow-wrap: anywhere}
.cosmetic-preview__avatar-row .user-avatar {position: relative;z-index: 1;width: 64px;height: 64px;border: 3px solid #fff;border-radius: 50%;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);flex: 0 0 auto}
.cosmetic-choices {display: grid;grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));gap: 12px}
.cosmetic-choice-form {display: contents}
.cosmetic-choice {position: relative;min-width: 0;padding: 0;border: 2px solid var(--color-border);border-radius: var(--radius-md);background: #fff;overflow: hidden;text-align: left;cursor: pointer;font-family: var(--font-family-base);transition: border-color 0.15s, transform 0.15s}
.cosmetic-choice:hover {border-color: #a5f3fc;transform: translateY(-2px)}
.cosmetic-choice--equipped {border-color: var(--color-aqua-600, #0891b2)}
.cosmetic-choice__thumb {display: block;position: relative;height: 48px;overflow: hidden}
.cosmetic-choice__name {display: block;padding: 8px 10px 4px;font-size: 0.76rem;font-weight: 700;color: var(--color-text-secondary);overflow-wrap: anywhere}
.cosmetic-choice__flag {position: absolute;top: 6px;right: 6px;font-size: 0.6rem;font-weight: 700;padding: 2px 7px;border-radius: 999px;background: var(--color-aqua-600, #0891b2);color: #fff}
.cosmetic-settings__empty {margin: 0;padding: 20px 0;text-align: center;font-size: 0.8rem;color: var(--color-text-muted)}
@media (max-width: 480px) {.cosmetic-settings {padding: 14px 12px}
.cosmetic-choices {grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));gap: 10px}}