.image-editor { width: min(550px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); padding: 24px; overflow-y: auto; border: 1px solid #a8b7ed26; border-radius: 20px; background: #10131e; color: #e9edfa; box-shadow: 0 24px 100px #0009; scrollbar-width: thin; scrollbar-color: #343e58 transparent; }
.image-editor[open] { animation: auth-enter 160ms ease-out; }
.image-editor::backdrop { background: #03050dd9; backdrop-filter: blur(10px); }
.image-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 21px; }
.image-editor-kicker { display: block; margin-bottom: 9px; color: #9caee0; font-size: .59rem; font-weight: 700; letter-spacing: .16em; }
.image-editor h2 { margin: 0; color: #f0f2fc; font-size: 1.45rem; font-weight: 700; letter-spacing: -.045em; line-height: 1.2; }
.image-editor-heading > button { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; padding: 7px; border: 0; border-radius: 9px; background: #ffffff05; color: #a0abc3; cursor: pointer; }
.image-editor-heading svg { width: 100%; height: 100%; }
.image-editor-stage { position: relative; display: grid; place-items: center; min-height: 286px; padding: 24px; overflow: hidden; border: 1px solid #9aaee51c; border-radius: 13px; background: radial-gradient(ellipse at 50% 40%, #222b46, #090d17 85%); }
.image-editor-window { position: relative; flex: 0 0 auto; width: min(236px, 100%); aspect-ratio: 1; overflow: hidden; border-radius: 50%; outline: 1px solid #c2ceff85; background: #0c101a; box-shadow: 0 0 0 7px #a1b4f00a, 0 8px 28px #0005; touch-action: none; cursor: grab; }
.image-editor[data-kind="banner"] .image-editor-stage { min-height: 176px; }
.image-editor[data-kind="banner"] .image-editor-window { width: 100%; aspect-ratio: 5 / 1; border-radius: 9px; }
.image-editor-window.is-dragging { cursor: grabbing; }
.image-editor-window > img { position: absolute; display: block; max-width: none; user-select: none; pointer-events: none; image-orientation: from-image; }
.image-editor-grid { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(33.333% - .5px), #fff3 33.333%, transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), #fff3 66.666%, transparent calc(66.666% + .5px)), linear-gradient(transparent calc(33.333% - .5px), #fff3 33.333%, transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), #fff3 66.666%, transparent calc(66.666% + .5px)); opacity: 0; pointer-events: none; transition: opacity 120ms; }
.image-editor-window.is-dragging .image-editor-grid { opacity: 1; }
.image-editor-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 25px; background: #0c101ae8; color: #b4c0de; font-size: .78rem; line-height: 1.7; text-align: center; }
.image-editor-hint { margin: 14px 0 21px; color: #9aa6c1; font-size: .71rem; line-height: 1.7; text-align: center; }
.image-editor-zoom-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: .72rem; }
.image-editor-zoom-heading label { color: #d4def6; font-weight: 600; }
.image-editor-zoom-heading output { color: #a7b8e8; font-variant-numeric: tabular-nums; }
.image-editor-zoom { display: flex; align-items: center; gap: 15px; }
.image-editor-zoom input { flex: 1; min-width: 0; height: 30px; margin: 0; accent-color: #b3b5fa; cursor: ew-resize; }
.image-editor-zoom button { display: grid; place-items: center; flex: 0 0 33px; height: 33px; padding: 0; border: 1px solid #a9b9ef25; border-radius: 9px; background: #a9b9ef07; color: #d9e2fb; font: inherit; font-size: 1.05rem; cursor: pointer; }
.image-editor-footer { position: sticky; bottom: -24px; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 22px -24px -24px; padding: 17px 24px; border-top: 1px solid #a9b9ef16; background: #10131ef5; backdrop-filter: blur(12px); }
.image-editor-footer > div { display: flex; align-items: center; gap: 10px; }
.image-editor-footer button { min-height: 39px; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; transition: background 140ms, border-color 140ms, box-shadow 140ms; }
.image-editor-reset { padding-inline: 0 !important; background: transparent; color: #a3b2d4; }
.image-editor-cancel { border-color: #a9b9ef20 !important; background: #a9b9ef06; color: #c4cfea; }
.image-editor-apply { background: #c5cefc; color: #19203c; }
.image-editor-apply:hover { background: #d6dcff; box-shadow: 0 0 16px #a3aaff15; }
.image-editor-cancel:hover, .image-editor-heading > button:hover { background: #a9b9ef12; }
.image-editor-reset:hover { color: #dce5ff; }
.profile-page .image-editor :disabled { opacity: .45; cursor: default; }
.image-editor [hidden] { display: none !important; }
.image-editor :focus-visible { outline: 2px solid #b8baff; outline-offset: 4px; }
.member-small-button:focus-within { outline: 2px solid #b8baff; outline-offset: 3px; }
@media (max-width: 520px) { .image-editor { padding: 20px; border-radius: 16px; } .image-editor-stage { min-height: 260px; padding: 20px; } .image-editor-hint { font-size: .68rem; } .image-editor-footer { bottom: -20px; margin-inline: -20px; margin-bottom: -20px; padding: 15px 20px; } .image-editor-footer button { padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { .image-editor[open] { animation: none; } .image-editor-grid, .image-editor-footer button { transition: none; } }