.edit-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--modal-backdrop-bg); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: var(--spacing-md); } .edit-modal-content { background: var(--modal-bg); border-radius: var(--border-radius-xl); padding: var(--spacing-xl); max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); } .edit-modal-title { font-size: var(--font-size-2xl); margin: 0 0 var(--spacing-md) 0; text-align: center; color: var(--color-text-primary); } .edit-modal-subtitle { font-size: var(--font-size-lg); margin: var(--spacing-sm) 0 var(--spacing-md) 0; color: var(--color-text-secondary); } .edit-modal-field { margin-bottom: 1em; } .edit-modal-field label { display: block; margin-bottom: var(--spacing-xs); font-weight: 600; color: var(--color-text-primary); font-size: 0.95em; } .edit-modal-input, .edit-modal-select { width: 100%; padding: var(--input-padding-y) var(--input-padding-x); font-size: var(--font-size-base); border: var(--border-width-thin) solid var(--input-border-color); border-radius: var(--input-border-radius); box-sizing: border-box; transition: var(--transition-base); background: var(--color-bg-surface); color: var(--color-text-primary); } .edit-modal-input:focus, .edit-modal-select:focus { outline: none; border-color: var(--input-focus-border-color); box-shadow: var(--input-focus-shadow); } .edit-modal-divider { height: 1px; background: var(--color-border-light); margin: var(--spacing-xl) 0; } .edit-modal-actions { display: flex; gap: 0.8em; margin-top: 1.5em; } .edit-modal-btn { flex: 1; padding: var(--button-padding-y) var(--button-padding-x); font-size: var(--font-size-base); border: none; border-radius: var(--button-border-radius); cursor: pointer; font-weight: var(--button-font-weight); transition: var(--transition-base); } .edit-modal-btn:disabled { opacity: 0.6; cursor: not-allowed; } .edit-modal-btn-cancel { background: var(--color-secondary); color: var(--color-text-inverse); } .edit-modal-btn-cancel:hover:not(:disabled) { background: var(--color-secondary-hover); } .edit-modal-btn-save { background: var(--color-primary); color: var(--color-text-inverse); } .edit-modal-btn-save:hover:not(:disabled) { background: var(--color-primary-hover); } .edit-modal-btn-image { width: 100%; padding: var(--button-padding-y) var(--button-padding-x); font-size: var(--font-size-base); border: var(--border-width-medium) solid var(--color-success); border-radius: var(--button-border-radius); cursor: pointer; font-weight: var(--button-font-weight); transition: var(--transition-base); background: var(--color-bg-surface); color: var(--color-success); } .edit-modal-btn-image:hover:not(:disabled) { background: var(--color-success); color: var(--color-text-inverse); } .edit-modal-btn-image:disabled { opacity: 0.6; cursor: not-allowed; }