.avatar-editor-shell { background: white; border-radius: .75rem; box-sizing: border-box; color: #252535; max-width: 100%; min-width: 0; overflow: hidden; padding: 1rem; position: relative; width: 100%; }
turbo-frame#avatar-editor { display: block; max-width: 100%; min-width: 0; overflow-x: hidden; scroll-margin-top: .75rem; }
.avatar-editor-launcher { align-items: center; display: inline-flex; gap: .5rem; justify-content: center; }
.avatar-editor-launcher.is-loading { cursor: wait; opacity: .8; pointer-events: none; }
.avatar-editor-launcher__spinner { display: none; }
.avatar-editor-launcher.is-loading .avatar-editor-launcher__spinner,
.avatar-loading-spinner { animation: avatar-spin .75s linear infinite; border: 3px solid currentColor; border-radius: 999px; border-right-color: transparent; box-sizing: border-box; display: inline-block; height: 1.1rem; width: 1.1rem; }
.avatar-editor-loading { align-items: center; background: rgba(255, 255, 255, .9); color: #8a4b08; display: flex; font-weight: 600; gap: .65rem; inset: 0; justify-content: center; position: absolute; z-index: 2; }
.avatar-editor-loading[hidden] { display: none; }
@keyframes avatar-spin { to { transform: rotate(360deg); } }
.avatar-editor-layout { display: grid; gap: 1rem; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); max-width: 100%; min-width: 0; width: 100%; }
.avatar-editor-layout > * { max-width: 100%; min-width: 0; }
.avatar-preview { align-items: center; background: #f4f4f6; border: 2px dashed #d5d5dc; border-radius: .5rem; box-sizing: border-box; display: flex; height: 300px; justify-content: center; overflow: hidden; width: 100%; }
.avatar-preview canvas { display: block; height: auto; max-width: 100%; }
.avatar-creator-ui { color: #252535; min-width: 0; width: 100%; }
.category-tabs { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; max-width: 100%; min-width: 0; overflow: hidden; width: 100%; }
.category-tab { background: #f4efe3; border: 1px solid #e2d7bd; border-radius: .5rem; color: #29251d; cursor: pointer; font-size: .875rem; font-weight: 600; line-height: 1.25rem; padding: .5rem .75rem; }
.category-lock { font-size: .75em; margin-left: .35rem; }
.category-tab:hover, .category-tab.active { background: var(--gradient-primary); border-color: #ff9f40; color: #211507; }
.options-panel { min-height: 200px; min-width: 0; overflow: hidden; width: 100%; }
.options-list { align-content: start; display: grid; gap: .625rem; grid-template-columns: repeat(auto-fill, 84px); max-height: 200px; max-width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; padding: .5rem; scrollbar-color: #ff9f40 #f4efe3; scrollbar-width: auto; touch-action: pan-y; width: 100%; }
.options-list::-webkit-scrollbar { width: 10px; }
.options-list::-webkit-scrollbar-track { background: #f4efe3; border-radius: 999px; }
.options-list::-webkit-scrollbar-thumb { background: #ff9f40; border-radius: 999px; }
.option-item { align-items: center; background: white; border: 3px solid #ddd; border-radius: .5rem; box-sizing: border-box; cursor: pointer; display: flex; height: 84px; justify-content: center; overflow: hidden; width: 84px; }
.option-item:hover, .option-item.selected { border-color: #ff9f40; box-shadow: 0 0 0 2px rgba(255, 184, 74, .2); }
.option-item.locked { cursor: not-allowed; opacity: .62; position: relative; }
.option-item.locked:hover { border-color: #ddd; }
.option-lock { align-items: center; background: rgba(37, 37, 53, .82); border-radius: 999px; color: white; display: flex; font-size: 1rem; height: 2rem; justify-content: center; position: absolute; right: .35rem; top: .35rem; width: 2rem; }
.option-preview { height: 100%; object-fit: contain; width: 100%; }
.options-loading, .avatar-editor-status { color: #666; padding: 1rem; text-align: center; }
.avatar-editor-error { color: #b42318; }
.btn-reset { background: #f4efe3; border: 1px solid #e2d7bd !important; color: #29251d; font-weight: 600; }
.btn-reset:hover { background: #eadfca; }
@media (max-width: 800px) {
  .avatar-editor-shell { padding: .75rem; }
  .avatar-editor-layout { grid-template-columns: minmax(0, 1fr); }
  .avatar-preview { height: 230px; }
  /* Keep canvas inside the preview — max-width:none was stretching phone layouts after save */
  .avatar-preview canvas { flex: 0 0 auto; max-width: 100%; height: auto; }
  .category-tab { flex: 0 1 auto; }
  .options-panel { min-height: 172px; }
  .options-list { gap: .5rem; grid-template-columns: repeat(auto-fill, 72px); max-height: 172px; }
  .option-item { height: 72px; min-height: 72px; width: 72px; }
}