.image-editor { width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 26px; overflow: auto; color: var(--on-surface); background: var(--surface-container); border: 0; border-radius: 28px; box-shadow: var(--shadow); }
.image-editor::backdrop { background: rgb(15 10 24 / 65%); }
.editor-header, .editor-zone-actions, .editor-footer, .editor-footer > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.editor-header { position: sticky; top: -26px; z-index: 2; padding: 10px 0; background: var(--surface-container); }
.editor-header #editor-close { flex: none; border: 1px solid var(--outline-variant); border-radius: 50%; }
.editor-back-button { border: 1px solid var(--outline-variant); border-radius: 50%; }
.editor-header h2 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.editor-header p { margin: 4px 0 0; color: var(--on-surface-variant); overflow-wrap: anywhere; }
.editor-instructions { color: var(--on-surface-variant); font-size: 14px; }
.editor-toolbar { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(140px, 1fr) minmax(200px, 1.5fr); align-items: center; gap: 20px; margin: 20px 0 12px; }
.editor-toolbar input[type="range"] { width: 100%; accent-color: var(--primary); }
.editor-toolbar input[type="color"] { width: 64px; height: 40px; border: 1px solid var(--outline); border-radius: 10px; }
.editor-safety, .editor-privacy { font-size: 12px; color: var(--on-surface-variant); line-height: 1.6; }
.editor-stage { display: flex; justify-content: center; max-height: 56dvh; overflow: auto; padding: 18px; background: var(--surface); border-radius: 20px; min-height: 120px; }
.editor-canvas-wrap { position: relative; max-width: 100%; align-self: flex-start; flex-shrink: 0; }
#editor-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; background: repeating-conic-gradient(#bbb 0% 25%, #eee 0% 50%) 0 0 / 16px 16px; }
.editor-selection { position: absolute; border: 2px dashed #fff; outline: 1px solid var(--primary); pointer-events: none; box-sizing: border-box; }
.editor-feedback { min-height: 24px; margin: 12px 0; color: var(--on-primary-container); font-size: 13px; }
.editor-coordinates { margin: 12px 0; font-size: 13px; }
.editor-coordinates summary { cursor: pointer; color: var(--primary); }
.editor-coordinate-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 14px 0; }
.editor-zone-actions { justify-content: flex-start; flex-wrap: wrap; }
.editor-footer { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--outline-variant); flex-wrap: wrap; }
.editor-footer > div { flex-wrap: wrap; }
.image-editor button:active:not(:disabled) { transform: scale(.97); }
.image-editor [hidden] { display: none !important; }
.file-edit-button { display: inline-block; margin-top: 5px; min-height: 32px; font-size: 12px; }
@media (max-width: 640px) { .image-editor { padding: 18px; border-radius: 22px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } .editor-toolbar { grid-template-columns: 1fr 1fr; gap: 12px; } #editor-strength-field, #editor-color-field { grid-column: 1 / -1; } .editor-coordinate-fields { grid-template-columns: 1fr 1fr; } .editor-stage { padding: 8px; } .editor-footer > div { width: 100%; } .editor-footer .filled-button { flex: 1; } }