.app-image-editor{width:min(960px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #50515a;border-radius:18px;background:#22242b;color:#f5f5f7;box-shadow:0 24px 80px #0009;overflow:auto;font-family:inherit}
.app-image-editor::backdrop{background:#000b}
.app-image-editor header,.app-image-editor footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px}
.app-image-editor header{border-bottom:1px solid #454650}.app-image-editor h2{font-size:1.25rem;margin:0 0 4px;color:inherit}.app-image-editor p{margin:0;color:#c4c6d0;font-size:.88rem}.app-image-editor footer{border-top:1px solid #454650;justify-content:flex-end}
.app-image-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;padding:22px}.app-image-stage{display:flex;align-items:center;justify-content:center;min-width:0;min-height:240px;background:#14151a;border-radius:10px;padding:12px}
.app-image-editor canvas{display:block;max-width:100%;max-height:52dvh;width:auto;height:auto;object-fit:contain;cursor:move;touch-action:none;background:repeating-conic-gradient(#51525a 0% 25%,#393a42 0% 50%) 0/20px 20px;outline:1px solid #ddd5}
.app-image-controls{display:flex;flex-direction:column;gap:18px;min-width:0}.app-image-controls label{display:block;font-size:.9rem}.app-image-controls input[type=range]{display:block;width:100%;accent-color:#e3bf72;margin-top:10px}.app-image-controls output{float:right;color:#e3bf72}.app-image-buttons{display:flex;flex-wrap:wrap;gap:8px}
.app-image-editor button,.app-image-file{padding:9px 13px;border:1px solid #626470;border-radius:8px;background:#30323b;color:#fff;font:inherit;cursor:pointer}.app-image-editor button:focus-visible,.app-image-editor canvas:focus-visible,.app-image-editor input:focus-visible{outline:3px solid #e3bf72;outline-offset:3px}.app-image-editor .app-image-apply{background:#e3bf72;color:#231c10;border-color:#e3bf72;font-weight:700}.app-image-editor button:disabled{opacity:.45;cursor:wait}.app-image-file input{display:block;width:100%;margin-top:8px;font-size:.8rem}.app-image-editor [data-error]{color:#ffaaaa}
@media(max-width:640px){.app-image-body{grid-template-columns:1fr;padding:14px;gap:16px}.app-image-stage{min-height:160px}.app-image-editor canvas{max-height:35dvh}.app-image-editor header,.app-image-editor footer{padding:14px}.app-image-controls{gap:12px}}
.app-image-editor footer{position:sticky;bottom:0;background:#22242b;z-index:1}
.app-avatar-edit{position:relative;display:inline-block;flex-shrink:0;line-height:1}.app-avatar-image{display:block;width:100px;height:100px;border-radius:16px;overflow:hidden}.app-avatar-pencil{position:absolute;right:-7px;bottom:-5px;display:grid;place-items:center;width:34px;height:34px;border:2px solid #24262d;border-radius:50%;background:#e3bf72;color:#231c10;cursor:pointer;box-shadow:0 2px 8px #0005}.app-avatar-pencil:hover{background:#f3d799}.app-avatar-pencil:focus-visible{outline:3px solid #e3bf72;outline-offset:3px}
.app-image-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:160px;padding:22px;border:2px dashed #858690;border-radius:12px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;overflow:hidden}.app-image-drop>i{font-size:2rem}.app-image-drop>span{font-size:.85rem}.app-image-drop:hover,.app-image-drop.is-dragging,.app-image-drop:focus-within{border-color:#d3aa54;background-color:#d3aa5418}.app-image-drop-input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.app-image-drop-caption{position:absolute;bottom:0;left:0;right:0;padding:10px;background:#191a20de;color:#fff;font-size:.8rem;pointer-events:none}.show-image-frame.app-image-drop{padding:0}.show-image-frame.app-image-drop img{pointer-events:none}