.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-cover--sunflower-glass {background:
radial-gradient(80% 180% at 50% 120%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 55%),
linear-gradient(165deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.08) 100%),
var(--cc-base, #fef3c7)}
.cosmetic-cover--tsukimi {background:
radial-gradient(52% 150% at 52% 34%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 62%),
linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.34) 100%),
var(--cc-sky, #101a3d)}
.cosmetic-cover--momiji-nagare {background:
radial-gradient(90% 170% at 50% -25%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%),
linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.24) 100%),
var(--cc-water, #14455e)}
.cosmetic-cover--none,
.cosmetic-cover--tokigyo {background:
radial-gradient(90% 170% at 50% -25%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 62%),
linear-gradient(180deg, #1f6f9c 0%, #0b3350 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-slot-tabs {display: flex;flex-wrap: wrap;gap: 8px;margin: 0 0 16px}
.cosmetic-slot-tab {padding: 6px 14px;border: 1px solid var(--color-border, #e2e8f0);border-radius: 999px;font-size: 0.8rem;font-weight: 700;color: var(--color-text-secondary, #475569);text-decoration: none;background: #fff}
.cosmetic-slot-tab--current {border-color: transparent;background: var(--color-primary, #3b82f6);color: #fff}
.cosmetic-preview__thumb {display: block;position: relative;height: 80px;border-radius: var(--radius-md, 12px);overflow: hidden}
.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}}
.cosmetic-gacha__card {position: relative;display: flex;align-items: stretch;gap: 18px;padding: 16px 18px 16px 16px;border: 1px solid #bae6fd;border-radius: var(--radius-md, 12px);background:
linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
linear-gradient(100deg, #fefce8 0%, #f0fdfa 55%, #ecfeff 100%);overflow: hidden}
.cosmetic-gacha__shore {position: absolute;right: 0;bottom: 0;left: 0;width: 100%;height: 22px;pointer-events: none}
.cosmetic-gacha__art {position: relative;flex: 0 0 112px;display: flex;align-items: center;justify-content: center;border-radius: var(--radius-md, 12px);background: radial-gradient(60% 60% at 50% 70%, rgba(14, 165, 233, 0.16), transparent 70%)}
.cosmetic-gacha__art .raid-reward-cooler {width: 96px;height: 72px;filter: drop-shadow(0 6px 10px rgba(2, 132, 199, 0.22))}
.cosmetic-gacha__art .raid-reward-inner-open {opacity: 0}
.cosmetic-gacha__art--done {opacity: 0.75}
.cosmetic-gacha__body {position: relative;flex: 1 1 auto;min-width: 0;display: flex;flex-direction: column;gap: 8px}
.cosmetic-gacha__eyebrow {display: inline-flex;align-items: center;flex-wrap: wrap;gap: 8px}
.cosmetic-gacha__place {font-size: 0.7rem;font-weight: 700;letter-spacing: 0.04em;color: var(--color-aqua-600, #0891b2)}
.cosmetic-gacha__ticket {display: inline-flex;align-items: center;gap: 5px;padding: 3px 12px;border-radius: 999px;font-size: 11.5px;font-weight: 700}
.cosmetic-gacha__ticket svg {width: 13px;height: 13px}
.cosmetic-gacha__ticket.is-ready {background: linear-gradient(100deg, #fde68a, #fbbf24);color: #04121f}
.cosmetic-gacha__ticket.is-done {background: var(--color-status-completed-bg, #e2e8f0);color: var(--color-status-completed-text, #475569)}
.cosmetic-gacha__heading {margin: 0;font-size: 0.95rem;font-weight: 700;line-height: 1.5;color: var(--color-text-primary);overflow-wrap: anywhere}
.cosmetic-gacha__text {margin: 0;font-size: 0.78rem;line-height: 1.7;color: var(--color-text-secondary);overflow-wrap: anywhere}
.cosmetic-gacha__lineup {margin: 4px 0 2px}
.cosmetic-gacha__lineup-title {display: block;margin-bottom: 6px;font-size: 0.7rem;font-weight: 700;color: var(--color-text-muted)}
.cosmetic-gacha__lineup-title b {color: var(--color-text-secondary)}
.cosmetic-gacha__lineup-list {display: flex;flex-wrap: wrap;gap: 8px;margin: 0;padding: 0;list-style: none}
.cosmetic-gacha__item {display: flex;flex-direction: column;gap: 4px;width: 92px}
.cosmetic-gacha__item-thumb {display: block;position: relative;height: 30px;border: 1px solid rgba(255, 255, 255, 0.7);border-radius: 6px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);overflow: hidden}
.cosmetic-gacha__item-thumb .cover-wave {height: 8px}
.cosmetic-gacha__item-name {display: flex;align-items: center;gap: 3px;font-size: 0.66rem;font-weight: 700;color: var(--color-text-secondary);overflow-wrap: anywhere}
.cosmetic-gacha__item-name svg {width: 10px;height: 10px;flex: 0 0 auto;color: var(--color-aqua-600, #0891b2)}
.cosmetic-gacha__item--unknown .cosmetic-gacha__item-thumb {display: flex;align-items: center;justify-content: center;background:
repeating-linear-gradient(135deg, rgba(100, 116, 139, 0.22) 0 6px, rgba(100, 116, 139, 0.1) 6px 12px),
#e2e8f0;border-color: #cbd5e1;box-shadow: none;color: #94a3b8;font-size: 0.85rem;font-weight: 700}
.cosmetic-gacha__item--unknown .cosmetic-gacha__item-name {color: var(--color-text-muted)}
.cosmetic-gacha__actions {display: flex;align-items: center;flex-wrap: wrap;gap: 10px 16px;margin-top: 4px}
.cosmetic-gacha__cta {display: inline-flex;align-items: center;gap: 6px;padding: 9px 16px;border-radius: 999px;background: var(--color-aqua-600, #0891b2);color: #fff;font-size: 0.8rem;font-weight: 700;text-decoration: none;box-shadow: 0 2px 6px rgba(8, 145, 178, 0.28)}
.cosmetic-gacha__cta svg {width: 14px;height: 14px}
.cosmetic-gacha__cta--quiet {background: #fff;color: var(--color-aqua-600, #0891b2);border: 1px solid #a5f3fc;box-shadow: none}
.cosmetic-gacha__sub {font-size: 0.72rem;font-weight: 600;color: var(--color-text-muted);text-decoration: underline;text-underline-offset: 2px}
.cosmetic-gacha__sub:hover {color: var(--color-aqua-600, #0891b2)}
@media (max-width: 480px) {.cosmetic-gacha__card {flex-direction: column;gap: 10px;padding: 14px}
.cosmetic-gacha__art {flex-basis: auto;height: 84px}
.cosmetic-gacha__art .raid-reward-cooler {width: 84px;height: 63px}
.cosmetic-gacha__cta {width: 100%;justify-content: center}
.cosmetic-gacha__item {width: calc(33.333% - 6px)}}