.customization-dialog{width:min(520px,calc(100vw - 28px));max-height:85dvh;overflow:auto;padding:22px;border:1px solid #9370b357;border-radius:22px;color:#eee7f5;background:linear-gradient(160deg,#20142c,#0d0912 80%);box-shadow:0 20px 80px #000b,0 0 26px #8d4bcb16}
.customization-dialog::backdrop{background:#05030880;backdrop-filter:none}
.customization-dialog h2{font-size:20px;margin:0}.customization-note{display:block;font-size:12px;line-height:1.7;color:#bfb0cc;margin:12px 0}
.customization-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.customization-choice{display:grid;justify-items:center;gap:16px;min-width:0;padding:23px 10px;border:1px solid #80608d55;border-radius:16px;background:#130d1b;color:#c9bacf;cursor:pointer;transition:border-color .18s,box-shadow .18s,color .18s}
.customization-choice[aria-pressed=true]{color:#eadcff;border-color:#bb8fee;box-shadow:0 0 18px #9e60d32b,inset 0 0 14px #9861c40e}
.customization-choice strong{font-size:13px}.customization-preview{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;color:#cfb4ee}
.customization-preview svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.customization-preview .comment-glyph{display:block;width:28px;height:28px}.customization-dialog .primary-button{width:100%;min-height:44px}
.customization-choice:focus-visible,.profile-customize-trigger:focus-visible{outline:2px solid #d6b0ff;outline-offset:3px}
.profile-customize-trigger{width:100%;min-height:46px;margin-top:8px}
.profile-edit .profile-customize-trigger{display:flex;align-items:center;gap:14px;min-height:88px;margin:0 0 16px;padding:16px 18px;text-align:left;border:1px solid #b68aee85;border-radius:17px;background:radial-gradient(ellipse at 5% 50%,#66318c30,transparent 65%),#15101e;box-shadow:0 0 20px #9553d018;transition:border-color .2s,box-shadow .2s}
.profile-edit .profile-customize-trigger:hover{border-color:#d1a9ff;box-shadow:0 0 24px #a15de938}
.profile-customize-trigger>span:nth-child(2){flex:1;display:grid;gap:6px}.profile-customize-trigger strong{font-size:15px}.profile-customize-trigger small{font-size:11px;color:#baa6cc}
.customize-entry-symbol{display:grid;place-items:center;width:40px;height:40px;color:#d6b8ff;filter:drop-shadow(0 0 8px #ad69e75c)}.customize-entry-symbol svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.customization-hero{display:flex;align-items:center;gap:22px;padding:24px 16px;margin:18px 0 24px;border-radius:18px;background:radial-gradient(ellipse at 20% 50%,#6e399238,transparent 70%),#130d1c;border:1px solid #9f70cb26}
.customization-avatar{display:grid;place-items:center;flex:0 0 82px;width:82px;height:82px;border-radius:50%;box-shadow:0 0 24px color-mix(in srgb,var(--border-color,#a977e8) 23%,transparent)}
.customization-avatar .avatar{width:80px;height:80px;min-width:80px;border:2px solid var(--border-color,#a977e8);font-size:26px}
.customization-hero>div:last-child{display:grid;gap:9px}.customization-hero small{font-size:10px;letter-spacing:.18em;color:#b992e0}.customization-hero strong{font-size:16px;line-height:1.7}
.customization-dialog h3{font-size:14px;margin:22px 0 14px;color:#e6d5f6}
.customization-border-colors{display:flex;justify-content:space-between;gap:8px;padding:0;margin:0;border:0}
.customization-border-colors legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.customization-border-colors label{position:relative;display:grid;justify-items:center;gap:9px;padding:8px 4px;cursor:pointer}
.customization-border-colors input{position:absolute;opacity:0;width:1px;height:1px}
.customization-swatch{width:34px;height:34px;border:2px solid transparent;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 6px #14101c;transition:box-shadow .18s,border-color .18s}
.customization-border-colors input:checked+.customization-swatch{border-color:var(--swatch);box-shadow:inset 0 0 0 5px #14101c,0 0 15px color-mix(in srgb,var(--swatch) 40%,transparent)}
.customization-border-colors input:focus-visible+.customization-swatch{outline:2px solid #e4c9ff;outline-offset:4px}
.customization-border-colors small{font-size:10px;color:#bba8cb}.customization-choice[aria-pressed=true] strong{color:#e5ccff}
@media(max-width:380px){.customization-hero{gap:14px;padding:20px 12px}.customization-hero strong{font-size:14px}.profile-customize-trigger strong{font-size:13px}.profile-customize-trigger small{font-size:10px}}
.card-actions .backpack-glyph,.card-actions .grenade-glyph,.card-actions .comments-open .enter-glyph svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;transition:filter .18s,color .18s,transform .18s}
.card-actions .backpack-body,.card-actions .grenade-body,.card-actions .enter-key-body{fill:#15101d;transition:fill .2s}
.card-actions button[data-action="save"][aria-pressed="true"] .backpack-body{fill:#23354f}
.card-actions button[data-action="save"][aria-pressed="true"] .backpack-glyph{filter:drop-shadow(0 0 5px #82b9ff70)}
.card-actions .enter-arrow,.customization-preview .enter-arrow{fill:none;stroke:currentColor;stroke-width:1.55}
.card-actions button:hover .backpack-glyph,.card-actions button:hover .grenade-glyph,.card-actions .comments-open:hover .enter-glyph svg{filter:drop-shadow(0 0 5px #af7cf080)}
.card-actions button.is-animating[data-action="save"] .backpack-glyph{animation:backpack-stash .5s ease-out}
@keyframes backpack-stash{0%{transform:translateY(0) scale(1)}35%{transform:translateY(3px) scale(1.12,.9)}65%{transform:translateY(-2px) scale(.96,1.06)}100%{transform:translateY(0) scale(1)}}
@media(max-width:760px){.card-actions .backpack-glyph,.card-actions .grenade-glyph,.card-actions .comments-open .enter-glyph svg{width:28px;height:28px}.customization-preview{gap:9px}.customization-dialog{padding:18px}}
@media(prefers-reduced-motion:reduce){.card-actions button.is-animating[data-action="save"] .backpack-glyph{animation:none}}