/* Roblox 2018-style Avatar Editor. Everything is scoped to the editor page. */
.ae-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ae-header h1{margin:0}
.ae-get-more{display:flex;align-items:center;gap:16px;font-size:15px}
.ae-get-more-button{background:#02b757;color:#fff!important;font-weight:bold;font-size:17px;padding:10px 12px;border-radius:3px;text-decoration:none!important}
.ae-get-more-button:hover{background:#3fc679}

.avatar-editor{grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
.avatar-editor .avatar-preview-panel{padding:0;border:0;background:transparent}
.avatar-editor .ae-stage{position:relative}
.avatar-editor .avatar-view{height:360px;background:radial-gradient(ellipse at 50% 38%,#f6ead6 0%,#dcc3a0 45%,#a47f59 100%)}
.avatar-editor .preview-controls{position:absolute;right:10px;bottom:10px;gap:6px;padding:0}
.avatar-editor .preview-controls .outline{background:#fff;color:#393b3d;border:1px solid #c3c3c3;border-radius:3px;height:34px;min-width:40px;padding:0 10px;font-size:15px;font-weight:bold;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.avatar-editor .preview-controls .outline:hover{background:#f2f2f2}
.avatar-editor .preview-controls .selected{background:#00a2ff;border-color:#00a2ff;color:#fff}
.avatar-editor .avatar-preview-panel .notice{background:var(--surface);margin:0;padding:12px 14px;font-size:14px;text-align:left}
.avatar-editor .avatar-preview-panel .form-error:empty{display:none}

.avatar-editor .avatar-category-tabs{background:var(--surface);border:0;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.avatar-editor .avatar-category-tabs a{padding:12px 8px 10px;font-size:17px;font-weight:500;border-bottom:4px solid transparent;text-decoration:none}
.avatar-editor .avatar-category-tabs a:hover{border-bottom-color:#b8e3ff}
.avatar-editor .avatar-category-tabs .selected{border-bottom:4px solid #00a2ff;font-weight:500}
.avatar-editor .accessory-subtabs{background:var(--surface);padding:10px 14px;margin-top:2px;gap:16px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.avatar-editor .wardrobe-heading{margin:12px 0}
.avatar-editor .ae-breadcrumb{display:flex;gap:6px;font-size:15px;color:var(--muted)}
.avatar-editor .ae-breadcrumb span:first-child{color:inherit}
.avatar-editor .ae-search{display:flex;align-items:center;gap:12px;margin:12px 0 14px}
.avatar-editor .ae-search label{font-size:14px;font-weight:bold;white-space:nowrap}
.avatar-editor .ae-search input{width:min(340px,100%);min-width:0;height:34px;padding:6px 10px;border:1px solid var(--line);border-radius:3px;background:var(--surface);color:inherit}
.avatar-editor .ae-search input:focus{outline:2px solid #00a2ff;outline-offset:1px}

.avatar-editor .avatar-items{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.avatar-editor .wearable-card{position:relative;background:var(--surface);border:1px solid #d8d8d8;box-shadow:0 1px 3px rgba(0,0,0,.12);display:flex;flex-direction:column}
.avatar-editor .wearable-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.25)}
.avatar-editor .avatar-item-toggle,.avatar-editor .avatar-item-toggle:hover,.avatar-editor .equipped .avatar-item-toggle{outline:0}
.avatar-editor .wearable-card .catalog-image{height:auto!important;aspect-ratio:1;background:transparent;border-radius:0}
.avatar-editor .wearable-card .face-image{background:#fff}
.avatar-editor .wearable-card h2{margin:0;padding:7px 8px;border-top:1px solid #e3e3e3;font-size:14px;font-weight:normal;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar-editor .wearable-card h2 a{color:inherit}
.avatar-editor .limited-label{top:auto;bottom:4px;left:4px}
.avatar-editor .equipped-check{display:none}
.avatar-editor .wearable-card.equipped{border:2px solid #02b757;margin:-1px}
.avatar-editor .wearable-card.equipped::after{content:'';position:absolute;top:0;right:0;border-style:solid;border-width:0 30px 30px 0;border-color:transparent #02b757 transparent transparent;pointer-events:none}
.avatar-editor .avatar-items:has(.outfit-card){grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.avatar-editor .outfit-actions{flex-wrap:nowrap;gap:4px;margin:0;padding:0 8px 8px}
.avatar-editor .outfit-actions .outline{flex:1;min-width:0;padding:0 2px;height:26px}
.avatar-editor .outfit-note{font-size:14px}

body.dark .avatar-editor .wearable-card{border-color:#505457}
body.dark .avatar-editor .wearable-card h2{border-top-color:#505457}
body.dark .avatar-editor .wearable-card .catalog-image:not(.face-image){background:#393b3d}
body.dark .avatar-editor .wearable-card.equipped{border-color:#02b757}
body.dark .avatar-editor .preview-controls .outline:not(.selected){background:#393b3d;color:#eee;border-color:#656668}

@media(max-width:900px){.avatar-editor{grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:700px){.avatar-editor{grid-template-columns:1fr}.ae-get-more span{display:none}.avatar-editor .ae-search{align-items:stretch;flex-direction:column;gap:5px}.avatar-editor .ae-search input{width:100%}}