/* Cosmetic collections live in the existing Depot, within its safe-area shell. */
.phone-storefront .dp-tabs { overflow-x: auto; gap: 3px; }
.phone-storefront .dp-tab { min-width: 90px; flex-shrink: 0; }
.skin-intro { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 2px 0 8px; }
.skin-intro h3 { margin: 0 0 4px; color: #f0e6ce; font: 700 25px/1 'Barlow Condensed', sans-serif; letter-spacing: .045em; }
.skin-intro p, .skin-footer { margin: 0; color: #b8cbd5; font-size: 12px; line-height: 1.4; }
.skin-restore, .skin-standard { min-height: 38px; padding: 8px 12px; color: #cfdee4; border: 1px solid #597584; background: #1c303c; border-radius: 4px; font: 600 11px 'Chakra Petch', sans-serif; }
.skin-restore { flex-shrink: 0; }
.skin-restore-status { margin: 0 0 8px; color: #ffc96e; font-size: 12px; }
.skin-restore-status:empty { display: none; }
.skin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.skin-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 0 0 12px; border: 1px solid #48606b; border-radius: 6px; background: linear-gradient(145deg, #263944, #14212c); color: #e7eff0; text-align: left; cursor: pointer; transition: border-color 140ms, transform 140ms; }
.skin-card:hover { border-color: var(--skin-accent); transform: translateY(-2px); }
.skin-card:active { transform: scale(.985); }
.skin-card-art { position: relative; width: 100%; aspect-ratio: 1.9; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--skin-accent) 24%, #15212d), #101925 80%); border-bottom: 1px solid #5b738344; }
.skin-card-art::after { content: ''; position: absolute; inset: auto 12px 10px; border-top: 1px solid var(--skin-accent); opacity: .5; }
.skin-card-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.skin-card-badge { position: absolute; top: 6px; left: 7px; padding: 3px 6px; background: #07131de0; color: var(--skin-accent); font: 700 9px 'Chakra Petch', sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.skin-card strong { padding: 9px 12px 4px; font: 700 24px/1 'Barlow Condensed', sans-serif; letter-spacing: .025em; }
.skin-card-description { padding: 0 12px; color: #afc3cd; font-size: 11px; line-height: 1.35; min-height: 43px; }
.skin-card-price { padding: 9px 12px; color: #e3c78a; font: 600 11px 'Chakra Petch', sans-serif; }
.skin-card-action { margin: auto 12px 0; border-top: 1px solid #627c8c55; padding-top: 8px; color: #eef4ef; font: 700 12px 'Chakra Petch', sans-serif; }
.skin-footer { padding: 12px 0 0; font-size: 11px; }
.skin-sheet { position: absolute; inset: 0; z-index: 28; padding: 10px; background: #09121bf7; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.skin-sheet-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .95fr); grid-template-rows: auto 1fr; gap: 8px 20px; width: min(940px, 100%); max-height: 100%; overflow: auto; padding: 12px; box-sizing: border-box; border: 1px solid #55717f; border-radius: 7px; background: linear-gradient(140deg, #243742, #101e2a); }
.skin-sheet-head { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.skin-sheet h3 { margin: 0; color: #f5dfb0; font: 700 30px/1 'Barlow Condensed', sans-serif; }
.skin-close { width: 42px; height: 42px; border: 1px solid #718592; border-radius: 4px; background: #172b3a; color: #eaf0ed; font-size: 26px; }
.skin-visual { min-width: 0; align-self: start; display: flex; flex-direction: column; align-items: center; border: 1px solid #486070; border-radius: 5px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--skin-accent) 18%, #1a2a38), #0c1520 76%); }
.skin-preview { width: 100%; aspect-ratio: 1.6; }
.skin-preview canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.skin-preview p { padding: 20px; color: #bed4dc; }
.skin-unit-name { color: #e5edef; font: 700 17px/1.1 'Barlow Condensed', sans-serif; }
.skin-drag-note { margin: 8px 0 12px; color: #94adb9; font: 600 9px 'Chakra Petch', sans-serif; letter-spacing: .09em; }
.skin-detail { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.skin-tier { align-self: flex-start; padding: 4px 7px; border: 1px solid #a4834f; color: #f4d392; font: 700 9px 'Chakra Petch', sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.skin-detail p { margin: 0; color: #cad8de; font-size: 12px; line-height: 1.4; }
.skin-detail .skin-small { color: #a9beca; font-size: 10px; }
.skin-controls { display: grid; grid-template-columns: 1.7fr 1fr; gap: 8px; }
.skin-controls label { display: flex; flex-direction: column; gap: 4px; color: #b5c9d4; font: 600 10px 'Chakra Petch', sans-serif; }
.skin-controls select { min-width: 0; width: 100%; min-height: 38px; padding: 6px; border: 1px solid #5a7789; border-radius: 4px; background: #112633; color: #edf3ef; font: 600 12px 'Chakra Petch', sans-serif; }
.skin-buy-one, .skin-buy-team { min-height: 44px; padding: 8px 12px; border: 1px solid #d3af63; border-radius: 4px; color: #172127; background: linear-gradient(#edc675, #b48c40); font: 700 13px 'Chakra Petch', sans-serif; }
.skin-buy-team { border-color: #72cbb9; background: linear-gradient(#9ce1c4, #67b99f); }
.skin-buy-one:disabled, .skin-buy-team:disabled { color: #b6c6ce; border-color: #506975; background: #2a3d49; }
.skin-detail .skin-checkout-state { color: #f3c681; font-size: 11px; min-height: 28px; }
.skin-sheet button:focus-visible, .skin-card:focus-visible, .skin-sheet select:focus-visible, .skin-restore:focus-visible { outline: 2px solid #ffe09d; outline-offset: 2px; }
@media (max-width: 690px) { .skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skin-sheet-box { gap: 10px; grid-template-columns: minmax(0, .9fr) minmax(220px, 1fr); } }
@media (max-width: 460px) { .skin-grid { grid-template-columns: 1fr; } .skin-intro { align-items: flex-start; flex-direction: column; } .skin-sheet-box { grid-template-columns: minmax(0, 1fr); } .skin-sheet h3 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .skin-card { transition: none; } }