.image-editor { width:calc(100vw - 24px); height:calc(100dvh - 24px); max-width:none; max-height:none; padding:14px; background:#171717; color:#ccc; border:1px solid #383838; border-radius:16px; display:flex; flex-direction:column; gap:10px; }
.image-editor:not([open]) { display:none; }
.image-editor::backdrop { background:#000d; }
.image-editor-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.image-editor-head strong { font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.image-editor-tools { display:flex; align-items:center; gap:6px; overflow:auto; flex-shrink:0; }
.image-editor-tool { display:flex; align-items:center; gap:7px; white-space:nowrap; font:inherit; font-size:13px; padding:8px 10px; border:0; border-radius:20px; background:#272727; color:#bbb; }
.image-editor-tool.selected,.image-editor-tool:hover { background:#454545; color:#fff; }
.image-editor-tool:disabled { opacity:.4; }
.image-editor-circle { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; padding:0; border:0; border-radius:50%; background:#292929; color:#ddd; }
.image-editor-options { display:flex; align-items:center; gap:12px; min-height:32px; }
.image-editor-options input[type=color] { width:32px; height:28px; padding:0; border:0; }
.image-editor-options input[type=range] { width:130px; padding:0; }
.image-editor-options .image-editor-comment { min-width:100px; width:320px; padding:6px; }
.image-editor-zoom { width:auto; max-width:220px; margin-left:auto; border-radius:20px; background:#292929; font-size:13px; }
.image-editor-stage { flex:1; min-height:0; overflow:auto; display:grid; align-items:safe center; justify-items:safe center; background:#111; border-radius:10px; padding:20px; }
.image-editor-canvas { touch-action:none; flex:0 0 auto; background:repeating-conic-gradient(#333 0% 25%,#292929 0% 50%) 50%/16px 16px; }
.image-editor-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.image-editor-footer .primary { white-space:nowrap; border-radius:20px; }
.image-editor-note { font-size:12px; color:#999; }
.image-resize-form { display:flex; flex-direction:column; gap:8px; }
.image-resize-form label { display:flex; align-items:center; gap:8px; }
.image-resize-form input[type=checkbox] { width:auto; }
@media(max-width:720px) { .image-editor { padding:10px; } .image-editor-footer { align-items:flex-end; } .image-editor-note { font-size:11px; } .image-editor-tools { gap:4px; } }